my tailwind media query utility is dysfunctional

124 Views Asked by At

Using Tailwind I set an element to apply the 'flex-col' utility by default but 'flex-row' utility on small devices, so 'sm:flex-row'. But it applies the sm flex utility by default instead of the 'flex-col' I'd set. Please, what can I do to fix this.

1

There are 1 best solutions below

1
On

Tailwind uses a mobile first breakpoint system

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.

Therefore you should change applied variants into sm:flex-col (no need to add flex-row class as it is default flex direction)