0

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.

Liti
  • 21
  • 5

1 Answers1

0

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)

Ihar Aliakseyenka
  • 9,587
  • 4
  • 28
  • 38
  • this was very helpful, although I had fixed the problem before seeing this reply but I solved it in a similar way. Thank you! – Liti Oct 17 '22 at 19:33