Tailwind responsive flexbox property is not working as expected

user_7940824 0
Viewed 1740

By default, ul has a justify-start flexbox property. When applying a responsive design for a small screen: it will be justify-center, for the medium screen: justify-around and for the large screen: justify-evenly. However, for all screen sizes, it only showing justify-evenly property, it overrides all the other justify-property. How is it possible to apply different justify-property for the different screens?

         <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>
flexbox tailwind-css frontend css html
2 Answers

You've added generic justify-around and justify-evenly classes instead of screen-size prefixed md:justify-around and lg:justify-evenly. In Tailwind, un-prefixed classes apply to all screen-sizes. Prefixed classes apply to all screen-sizes greater or equal to the given prefix.

<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'>
user_24106410

You need to add the breakpoint prefixes to each justify-* class, or else it gets applied to all breakpoints. Being that justify-evenly is last it's the one that ends up being applied.

<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'>
user_18707800
Related