Tailwind CSS 4 — co się zmieniło i czy warto migrować

Tailwind CSS 4 to największe przepisanie biblioteki od czasu jej powstania. Nowy silnik napisany w Rust (Oxide), konfiguracja w CSS, dziesięciokrotnie szybsze buildy. Co to znaczy dla projektów już używających v3?

Najważniejsze zmiany

• Konfiguracja w CSS — koniec z tailwind.config.js. Wszystko deklarujesz w @theme { ... } w pliku CSS
• Oxide engine — przepisany w Rust, znacznie szybsze hot reloady i produkcyjne buildy
• Brak postcss.config — Tailwind sam zarządza prefiksowaniem i nesting
• Nowy import: @import "tailwindcss" zamiast trzech osobnych @tailwind directives
• Container queries — wbudowane natywnie

Konfiguracja w CSS

@import "tailwindcss";

@theme {
  --color-brand: #dc2626;
  --font-display: "Fraunces", serif;
  --breakpoint-3xl: 1920px;
}

Klasa text-brand, font-display i breakpoint 3xl: stają się dostępne natychmiast.

Migracja z v3 na v4

Tailwind dostarcza oficjalne narzędzie do migracji:

npx @tailwindcss/upgrade

Ono przekonwertuje konfig JS na CSS, zaktualizuje composer/npm deps i ostrzeże o niekompatybilnych klasach.

Czy warto migrować istniejący projekt?

Z naszej praktyki:

• Nowe projekty: tak, bezdyskusyjnie v4
• Aktywnie rozwijane projekty na v3: migracja w ramach większego sprintu jest bezpieczna
• Projekty w maintenance, bez nowych ficzerów: zostaw na v3, oszczędź ryzyko

Pułapki

• Niektóre community pluginy do v3 jeszcze nie wspierają v4 — sprawdź przed migracją
• Jeśli używasz custom PostCSS pipeline, trzeba go uprościć
• Klasy w stylu bg-opacity-50 zostały zastąpione — używaj bg-red-500/50