Utility-First CSS Explained (Tailwind-Style)
- CSS Basics
- Selectors & Specificity
- Box Model & Units
- Typography & Text Styling
- Colors & Color Spaces
- Positioning & Stacking Context
- Flexbox
- Grid
- Grid Advanced
- Responsive Design
- Container Queries
- Pseudo-classes & Pseudo-elements
- Modern Selectors
- CSS Custom Properties
- CSS Functions
- Transitions & Animations
- Transforms
- Forms & Input Styling
- CSS Architecture & Methodologies
- Accessibility in CSS
- Performance & Optimization
- View Transitions & Modern APIs
- Cascade Layers & Scope
What Utility-First CSS Means
Instead of writing custom, semantically-named CSS classes for each component (as BEM does), utility-first CSS provides a large set of small, single-purpose classes - each controlling one specific style - that are combined directly in the HTML to build up a design.
A Worked Example
<div class="p-4 border rounded-lg shadow-sm">
<h3 class="text-xl font-semibold mb-2">Heading</h3>
<p class="text-gray-600">Some text.</p>
</div>Each class does exactly one thing - p-4 sets padding, rounded-lg sets a border radius, text-xl sets a font size - and the visual design emerges entirely from which utilities are combined on an element.
How This Differs from a Convention Like BEM
| BEM | Utility-first | |
|---|---|---|
| Where styling logic lives | In a separate CSS file, per component | Directly in the HTML class list |
| Class naming | Semantic (card__title) | Purely visual (text-xl) |
| Adding a new variant | Write new CSS | Combine existing utility classes |
Common Advantages Cited
- Very little unused CSS accumulates, since styles are reused directly rather than duplicated across component files.
- No need to invent a class name for every small variation.
- Changes are visible right where they are applied, without jumping to a separate stylesheet.
Common Tradeoffs to Be Aware Of
HTML markup can look visually noisy with many classes per element, and consistent design (spacing scale, color palette) depends entirely on the discipline of the utility set being used - without a clear system behind it, utility classes can be combined inconsistently just as easily as custom CSS can.