Свойство flexbox, реагирующее на попутный ветер, не работает должным образом

По умолчанию ul имеет свойство flexbox justify-start. При применении адаптивного дизайна для маленького экрана: это будет выравнивание по центру, для среднего экрана: выравнивание вокруг и для большого экрана: выравнивание по ширине. Однако для всех размеров экрана отображается только свойство justify-evenly, оно переопределяет все остальные свойства 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>