Tailwind 响应式 flexbox 属性未按预期工作

Question

默认情况下，ul 有一个 justify-start flexbox 属性。为 small 屏幕应用响应式设计时：justify-center，对于 medium屏幕：justify-around 和 large 屏幕：justify-evenly。但是，对于所有屏幕尺寸，它只显示 justify-evenly 属性，它会覆盖所有其他 justify-属性。如何为不同的屏幕应用不同的 justify-属性？

         <nav className='py-8'>
          <ul className='flex flex-row justify-start bg-red-400 sm:flex-row-reverse justify-center md:flex-row justify-around lg:flex-row-reverse justify-evenly'>
            <Link href='#'>
              <a className='p-2 text-2xl font-bold transition duration-500 hover:bg-indigo-300'> Beginnings</a>
            </Link>
            <Link href='#'>
              <a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Now</a>
            </Link>
            <Link href='#'>
              <a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Tech</a>
            </Link>
            <Link href='#'>
              <a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Talks</a>
            </Link>
            <Link href='#'>
              <a className='p-2 text-2xl font-bold hover:bg-indigo-300'> Connect</a>
            </Link>
          </ul>
        </nav>

Answer 1

您添加了通用 justify-around 和 justify-evenly 类，而不是前缀为 md:justify-around 和 lg:justify-evenly 的屏幕尺寸。在 Tailwind 中，不带前缀的类适用于所有屏幕尺寸。前缀类适用于所有大于或等于给定前缀的屏幕尺寸。

<ul className='flex flex-row justify-start bg-red-400 sm:flex-row-reverse justify-center md:flex-row md:justify-around lg:flex-row-reverse lg:justify-evenly'>

Answer 2

您需要为每个 justify-* class 添加断点前缀，否则它会应用于所有断点。因为 justify-evenly 是最后一个，它是最终被应用的那个。

<ul className='flex flex-row justify-start bg-red-400 sm:flex-row-reverse sm:justify-center md:flex-row md:justify-around lg:flex-row-reverse lg:justify-evenly'>

Tailwind 响应式 flexbox 属性未按预期工作

Tailwind responsive flexbox property is not working as expected

html

css

frontend

flexbox

tailwind-css

Tailwind 响应式 flexbox 属性 未按预期工作

Tailwind responsive flexbox property is not working as expected

html

css

frontend

flexbox

tailwind-css

Tailwind 响应式 flexbox 属性未按预期工作