Tailwind CSS v4: Zero-Config, CSS-First și Vitează Nebună

De ce Tailwind CSS v4 este o Rescriere Completă

Tailwind CSS v4 nu este o actualizare incrementală — este o rescriere completă a framework-ului. Echipa Tailwind a reconstruit întregul sistem de construire de la zero, renunțând la arhitectura bazată pe JavaScript și adoptând un pipeline CSS-first alimentat de Rust.

Motivele din spatele acestei decizii radicale au fost clar:

• Performanța — motorul v3 (bazat pe Node.js) devenise un bottleneck pentru proiectele mari. Compilarea proiectelor cu mii de clase utilitare putea dura secunde.
• Complexitatea configurației — fișierul tailwind.config.js devenise prea complex, cu prea multe opțiuni care necesita cunoștințe JavaScript.
• Flexibilitatea CSS — comunitatea cerea mai mult control la nivel CSS nativ, nu prin intermediul unei configurații JavaScript.

Configurație CSS-First cu Directiva @theme

Cea mai mare schimbare din v4 este eliminarea completă a fișierului tailwind.config.js. În loc să configurezi tailwind prin JavaScript, folosești directive CSS native.

/* Înainte (v3) - tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#10b981',
      },
      fontSize: {
        'display': '3rem',
      }
    }
  }
}

/* Acum (v4) - direct în CSS */
@import 'tailwindcss';

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #10b981;
  --font-size-display: 3rem;
}

Aceasta înseamnă că tot ce știi despre CSS este direct aplicabil. Nu mai trebuie să traduci concepte CSS în configurație JavaScript. Directiva @theme este singurul loc în care definești design tokens, și este parsată de Tailwind ca un fișier CSS standard.

Variabile CSS native

Folosind @theme, Tailwind v4 generează variabile CSS pe care le poți folosi oriunde — în fișiere CSS, în JavaScript, chiar și în animații:

@theme {
  --color-primary: #3b82f6;
  --spacing-lg: 2rem;
  --radius-card: 0.75rem;
}

/* Acum poți folosi variabilele oriunde */
.my-card {
  background: var(--color-primary);
  padding: var(--spacing-lg);
  border-radius: var(--radius-card);
}

Motorul Oxide: Performanță Alimentată de Rust

Inima noii arhitecturi este Oxide engine — un motor de compilare scris în Rust care procesează fișierele CSS și claselor utilitare cu viteză remarcabilă.

Comparația de performanță vorbește de la sine:

• v3 (Node.js): ~2-4 secunde pentru proiecte medii, ~10-15 secunde pentru proiecte mari
• v4 (Oxide): ~50-100ms pentru proiecte medii, ~200-500ms pentru proiecte mari

Aceasta înseamnă compilări sub milisecundă în development — practic instant. Hot Module Replacement (HMR) devine aproape imperceptibil, iar build-urile de producție se reduc de la secunde la fracțiuni de secundă.

# Compilare v3 (exemplu)
$ npx tailwindcss -i input.css -o output.css
✓ Compiled in 2.4s

# Compilare v4 (exemplu)
$ npx @tailwindcss/cli -i input.css -o output.css
✓ Compiled in 0.08s

Container Queries ca Prim-class Citizen

Tailwind CSS v4 introduce suport nativ pentru container queries — o alternativă modernă la media queries care se bazează pe dimensiunea containerului părinte, nu pe dimensiunea viewport-ului.

<!-- Container -->
<div class="@container">
  <!-- Copilul răspunde la lățimea containerului, nu a viewport-ului -->
  <div class="flex @max-md:flex-col @md:flex-row">
    <img class="w-20 h-20 @sm:w-32 @sm:h-32" />
    <div>
      <h3 class="text-lg @sm:text-xl @lg:text-2xl">Titlu</h3>
      <p class="text-sm @sm:text-base">Conținut adaptiv</p>
    </div>
  </div>
</div>

Aceasta face crearea de componente reutilizabile mult mai simplă — o componentă își adaptează layout-ul în funcție de spațiul disponibil, indiferent de unde este plasată în aplicație.

Noi Funcționalități: @source, Dark Mode, Transformări 3D

Directiva @source

Directiva @source îți permite să specifici fișiere suplimentare pe care Tailwind trebuie să le scaneze pentru clase utilitare:

@import 'tailwindcss';
@source '../components/**/*.tsx';
@source '../lib/utils.ts';

Aceasta este utilă când componentele tale se află în directoare pe care Tailwind nu le scanează automat.

Dark Mode Îmbunătățit

Dark mode-ul în v4 suportă acum și prefers-color-scheme automat, fără configurare suplimentară. Componentele cu prefixul dark: funcționează imediat:

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Conținut adaptiv la tema întunecată
</div>

Transformări 3D

Tailwind v4 adaugă utility-uri native pentru transformări 3D — rotate-x-*, rotate-y-*, perspective-* — fără a fi nevoie de CSS custom:

<div class="perspective-500 rotate-y-12 scale-95">
  Card cu efect 3D
</div>

Checklist de Migrație: v3 la v4

Iată pașii concreți pentru a migra un proiect existent la Tailwind CSS v4:

1. Actualizează dependențele — înlocuiește tailwindcss cu @tailwindcss/cli sau @tailwindcss/postcss
2. Șterge tailwind.config.js — toată configurația se mută în CSS prin @theme
3. Migrează fișierele CSS — folosește @import 'tailwindcss' în loc de @tailwind base/components/utilities
4. Verifică clasele modificate — unele utility-uri și-au schimbat numele (de exemplu, ring acum este ring-3 în loc de ring-2)
5. Testează dark mode-ul — verifică că toate variantele dark: funcționează corect
6. Rulează build-ul de producție — compară dimensiunea fișierului CSS rezultat cu versiunea anterioară

# Pașii de instalare
npm install tailwindcss @tailwindcss/cli

# rulează compilarea
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css

Tailwind CSS v4 reprezintă un salt semnificativ în evoluția framework-ului. Cu motorul Oxide, configurația CSS-first și funcționalitățile noi, este o alegere clară pentru orice proiect nou care utilizează Tailwind.