Utility-first și layout
De ce clase utilitare, scala, flex/grid și valori arbitrare.
Actualizat
Ce este Tailwind
Tailwind CSS e un framework CSS utility-first: în loc să scrii reguli CSS într-un fișier separat și să inventezi nume de clase (.card-header-title), compui stilul din clase mici, cu un singur rol (p-4, text-lg, flex), direct în markup.
Fiecare clasă = o declarație CSS: p-4 → padding: 1rem, flex → display: flex, text-muted → color: var(--color-muted). La build, Tailwind scanează fișierele și generează doar CSS-ul pentru clasele folosite.
Abordări de stilizare — comparație
| Abordare | Cum | Plusuri | Minusuri |
|---|---|---|---|
| CSS clasic / BEM | .card__title în .css |
standard, fără unelte | nume de inventat, CSS care crește, cod mort |
| CSS Modules | styles.title, scope pe fișier |
fără conflicte de nume | tot scrii și numești CSS separat |
| CSS-in-JS | styled.div |
stiluri dinamice în JS | cost la runtime, probleme cu Server Components |
| Tailwind | clase utilitare în markup | rapid, consistent, CSS mic, zero cod mort | markup lung, curbă de învățare |
Ideea, pe un exemplu
<button class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
Salvează
</button>Plusuri: nu mai inventezi nume, CSS-ul nu crește la nesfârșit (clasele se refolosesc), ștergi componenta → stilul dispare cu ea, design consistent (scală fixă).
Minusuri: markup lung, curbă de învățare a numelor. Se rezolvă prin componente, nu prin @apply.
Instalare v4
/* app/globals.css */
@import "tailwindcss";Fără tailwind.config.js — configurarea se face în CSS (@theme). Clasele sunt detectate automat din fișierele proiectului.
Scala — gândește în pași, nu în pixeli
| Clasă | Valoare |
|---|---|
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 |
lățimi |
size-10 |
width + height |
Valoare arbitrară când chiar trebuie: w-[327px], grid-cols-[220px_1fr], bg-[#1f5fbf].
Layout-ul de zi cu zi
<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>Ordinea claselor
Folosește pluginul oficial prettier-plugin-tailwindcss — sortează automat clasele, ca să nu te mai gândești.
Pe scurt
- Tailwind = clase utilitare, una per proprietate, generate doar dacă le folosești.
- Configurarea în CSS (
@theme), fără fișier JS în v4. - Gândești în scala de spațiere; valori arbitrare doar ca excepție.