tailwind css flex-col-reverse 不工作

Question

我目前正在研究一个组件的响应式样式，其中在大屏幕上我有 div，文本元素位于包含 img 元素的 div 之上，并且较小和中等屏幕的 div 与图像在 div 正下方与文本元素对齐。我正在使用 Next.js 和 Tailwind CSS 进行样式设置。

该样式在大屏幕上运行良好，但由于某些原因，当我的父元素中已有 flex flex-col-reverse 时，带有文本元素的 div 未在小屏幕上显示

完整代码如下所示：

import React from 'react'
import Image from 'next/image'
import catImage from '../assets/catImage.webp'

const LargeCard = () => {
  return (
    <article className='relative flex flex-col-reverse h-screen py-16 lg:h-96' >
      <div>
        <Image src={catImage} 
          layout='fill'
          objectFit='cover'
          className='rounded-2xl'      
        />
      </div>
      <div className='h-96 lg:absolute lg:top-32 lg:left-12' >
        <h2 className='text-white text-4xl font-semibold mb-3 w-64' >Cat Ipsum</h2>
        <p className='text-lg  lg:w-[300px] text-white' >Stretch out on bed i heard this rumor where the humans are our owners, pfft, what do they know?!</p>
        <button className='bg-gray-100 text-gray-900 px-4 py-2 rounded-lg mt-5 max-w-md ' >Learn more</button>
      </div>
    </article>
  )
}

export default LargeCard

tailwind.config.js:

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    maxWidth: {
      md: '90vw'
    }
  },
  variants: {
    extend: {},
  },
  plugins: [
    require('tailwind-scrollbar-hide')
  ],
}

Answer 1

忘记post答案。结果第二天就解决了

首先。 flex-col-reverse 确实有效。

其次。将 nextjs 的 <Image> 组件的 objectFit 属性设置为 cover 将设置 img 元素覆盖其祖父元素的整个区域，因此要包含它，您可以添加位置 relative 到包含它的父级 div 并确保也定义它的高度。

像这样：

<div className='relative h-96'>
  <Image src={catImage} 
    layout='fill'
    objectFit='cover'
    className='rounded-2xl'      
   />
 </div>

tailwind css flex-col-reverse 不工作

tailwind css flex-col-reverse not working

reactjs

next.js

tailwind-css