CODEWITHSUNDEEP
reactjstailwind-csstailwind-uitailwind-in-jstailwind-variants
Liti
Liti

Reputation: 21

my tailwind media query utility is dysfunctional

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.

Upvotes: 0

Views: 151

Answers (1)

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14333

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)

Upvotes: 0

Related Questions