Utility-first and layout
Why utility classes, the scale, flex/grid and arbitrary values.
Updated
What Tailwind is
Tailwind CSS is a utility-first CSS framework: instead of writing CSS rules in a separate file and inventing class names (.card-header-title), you compose the style from small, single-purpose classes (p-4, text-lg, flex), right in the markup.
Each class = one CSS declaration: p-4 → padding: 1rem, flex → display: flex, text-muted → color: var(--color-muted). At build time, Tailwind scans the files and generates CSS only for the classes that are used.
Styling approaches — a comparison
| Approach | How | Pros | Cons |
|---|---|---|---|
| classic CSS / BEM | .card__title in a .css |
standard, no tools | names to invent, CSS that keeps growing, dead code |
| CSS Modules | styles.title, scoped per file |
no name clashes | you still write and name CSS separately |
| CSS-in-JS | styled.div |
dynamic styles in JS | a runtime cost, problems with Server Components |
| Tailwind | utility classes in the markup | fast, consistent, small CSS, zero dead code | long markup, a learning curve |
The idea, in an example
<button class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
Save
</button>Pros: no more inventing names, the CSS doesn't grow forever (classes get reused), delete the component → its style goes with it, a consistent design (a fixed scale).
Cons: long markup, a learning curve for the names. Solved with components, not with @apply.
Installing v4
/* app/globals.css */
@import "tailwindcss";No tailwind.config.js — configuration happens in CSS (@theme). Classes are detected automatically from the project's files.
The scale — think in steps, not pixels
| Class | Value |
|---|---|
p-1 / p-2 / p-4 |
0.25rem / 0.5rem / 1rem |
gap-6 |
1.5rem |
text-sm / text-base / text-xl |
14 / 16 / 20px |
w-1/2, w-full, max-w-3xl |
widths |
size-10 |
width + height |
An arbitrary value when you really need one: w-[327px], grid-cols-[220px_1fr], bg-[#1f5fbf].
Everyday layout
<div class="flex items-center justify-between gap-4">...</div>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">...</div>
<main class="mx-auto max-w-6xl px-4">...</main>Class order
Use the official prettier-plugin-tailwindcss plugin — it sorts the classes automatically, so you don't have to think about it.
Summary
- Tailwind = utility classes, one per property, generated only if you use them.
- Configuration in CSS (
@theme), no JS file in v4. - You think in the spacing scale; arbitrary values only as an exception.