title: Tailwind responsive flexbox property is not working as expected
body: <p>By default, ul has a <strong>justify-start</strong> flexbox property. When applying a responsive design for a <strong>small</strong> screen: it will be <strong>justify-center</strong>, for the <strong>medium</strong> screen: <strong>justify-around</strong> and for the <strong>large</strong> screen: <strong>justify-evenly</strong>.
  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?</p>
  <pre><code>         &lt;nav className='py-8'&gt;
            &lt;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'&gt;
              &lt;Link href='#'&gt;
                &lt;a className='p-2 text-2xl font-bold transition duration-500 hover:bg-indigo-300'&gt; Beginnings&lt;/a&gt;
              &lt;/Link&gt;
              &lt;Link href='#'&gt;
                &lt;a className='p-2 text-2xl font-bold hover:bg-indigo-300'&gt; Now&lt;/a&gt;
              &lt;/Link&gt;
              &lt;Link href='#'&gt;
                &lt;a className='p-2 text-2xl font-bold hover:bg-indigo-300'&gt; Tech&lt;/a&gt;
              &lt;/Link&gt;
              &lt;Link href='#'&gt;
                &lt;a className='p-2 text-2xl font-bold hover:bg-indigo-300'&gt; Talks&lt;/a&gt;
              &lt;/Link&gt;
              &lt;Link href='#'&gt;
                &lt;a className='p-2 text-2xl font-bold hover:bg-indigo-300'&gt; Connect&lt;/a&gt;
              &lt;/Link&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>