As a developer with experience in frameworks like Bootstrap, diving into Tailwind CSS has been a mixed bag. While 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?
In Bootstrap, these labels represent variables tied to breakpoints, which can be configured globally to suit your design system. In Tailwind, however, their inconsistent usage feels more like an afterthought than a well-thought-out plan. For new users, particularly those transitioning from Bootstrap, this creates unnecessary complexity that significantly impacts development and testing.
The Dual Nature of sm, md, lg, and xl
Let’s break down how these terms are used in Tailwind:
1. Breakpoints (Responsive Design)
In Tailwind, sm, md, lg, and xl are used as responsive prefixes to apply styles at certain screen widths:
<div class="text-sm md:text-lg"> <!-- Small text on small screens, large text on medium screens and above --> </div>
Here’s how the breakpoints map to screen widths:
sm: 640px and abovemd: 768px and abovelg: 1024px and abovexl: 1280px and above
These are tied to your viewport and adjust the styles dynamically.
2. Fixed Sizing (e.g., max-w-lg)
In contrast, max-w-lg defines a fixed, absolute width:
<div class="max-w-lg"> <!-- Always caps the width at 32rem (512px), regardless of screen size --> </div>
These are the default fixed sizes in Tailwind:
max-w-sm: 24rem (384px)max-w-md: 28rem (448px)max-w-lg: 32rem (512px)max-w-xl: 36rem (576px)
The key issue? These two usages are entirely unrelated. There’s no connection between max-w-lg and the lg breakpoint—it’s purely a coincidence that they share the same label.
Why This Is a Problem
1. Ambiguity for Developers
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.
2. Poor Planning and Inflexibility
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.
Bootstrap, in contrast, provides consistent, configurable variables that apply across your entire design system. You can update breakpoints globally, and everything else aligns seamlessly.
3. Grid Logic Is a Nightmare
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.
Example:
<div class="grid grid-cols-2 gap-4 max-w-lg"> <div class="col-span-2 md:col-span-1"> <!-- Content --> </div> </div>
In this layout:
max-w-lgcaps the grid’s width at 512px.md:col-span-1reflows items at 768px, but the parent container remains capped at 512px.
In Bootstrap, these inconsistencies don’t exist:
<div class="container"> <div class="row"> <div class="col-12 col-md-6"> <!-- Content --> </div> </div> </div>
Bootstrap’s grid system automatically adjusts the container width at breakpoints, and grid columns behave predictably.
4. Impacts on Development and Testing
For new users, this inconsistency is maddening. When debugging a layout, how do you know if a class like lg is behaving as a breakpoint or as a fixed size? The only way to find out is through trial and error—or worse, digging into Tailwind’s documentation.
The Just-in-Time (JIT) compiler adds another layer of unpredictability. Since unused classes aren’t included in the build by default, you might find that max-w-lg doesn’t even work until you explicitly use it somewhere in your project.
Why This Is a Massive Negative Compared to Bootstrap
In Bootstrap:
sm,md,lg, andxlare consistent- They represent variables tied to breakpoints
- Everything is configurable in one place, and logic flows seamlessly between sizing and responsive classes.
In Tailwind, this fundamental inconsistency feels like a major oversight that needlessly complicates development.
Tailwind CSS offers undeniable power and flexibility, but this issue with sm, md, lg, and xl highlights a glaring flaw in its logic. For developers who value consistency and efficiency, this is a significant drawback—and a reminder that utility-first doesn’t always mean user-friendly.