Tailwind is often praised for its utility-first approach, I’ve found one glaring issue that makes me question the logic behind its design: why do sm, md, lg, and xl mean completely different things depending on the context? For anyone coming from Bootstrap, this is baffling. In Bootstrap, lg consistently refers to breakpoints, and these are globally configurable:

$grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, xl: 1200px );

Want a column to span six grid units on lg screens? Use col-lg-6. Need a width of 50% at the same breakpoint? It’s w-50—no ambiguity.

In Tailwind, you must remember that lg as a breakpoint and max-w-lg as a fixed size are completely independent. This wastes time and introduces bugs.

Tailwind prides itself on being configurable, yet there’s no way to globally align sm, md, lg, and xl between breakpoints and sizing classes. For example, what if you want max-w-lg to match the width of the lg breakpoint (1024px)? You can’t do this without hacking Tailwind’s configuration file.

Tailwind’s grid system relies heavily on breakpoints and utility classes, but the inconsistent behavior of sm, md, lg, and xl creates unpredictability when working with layouts. https://buildio.dev/logic-flaws-in-tailwind-css-sm-md-lg-and-xl-mean-different-things/