Tailwind media queries in ReactJS

Question

I have a div which contains a img inside a div. I'm trying to apply media queries which is in tailwind css.

<div className="flex">
    <img src="/assets/logo.png" className="h-20 md:w-2" alt="logo"/>
</div>

This md:w-2 applies for the desktop. But not in mobile devices(Chrome-iPhone12 Pro). In mobile devices default width(h-20) is applying. This should be the other way around. In my tailwind CSS there are no any screen overrides. I tried by taking out tag and tested any other places also. But it's still same. How may I fix this?

Answer 1

h-20 applies height, not width. Did you mean to apply the w-20 class instead?

As per the documentation:

By default, Tailwind uses a mobile-first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap.

What this means is that unprefixed utilities (like uppercase) take effect on all screen sizes, while prefixed utilities (like md:uppercase) only take effect at the specified breakpoint and above.

So for your situation, you'd do:

<img src="/assets/logo.png" className="md:h-20 w-2" alt="logo"/>

So that w-2 applies for mobile devices and then h-20 (or w-20) from md:h-20 (or md:w-20) applies for desktop (viewports that meet the @media (min-width: 768px) media query from the default md breakpoint configuration).