Wersja 4.0 to całkowicie przeprojektowany silnik, który oferuje znaczne przyspieszenie procesu budowania:

Szybsze kompilacje: Pełne przebudowy są do 3,5 razy szybsze, a przebudowy przyrostowe ponad 8 razy szybsze. TAILWINDCSS.COM

Mniejszy rozmiar pakietu: Rozmiar zainstalowanego pakietu zmniejszył się o ponad 35%.

Uproszczona instalacja

Proces instalacji został uproszczony, eliminując potrzebę dodatkowej konfiguracji:

Instalacja:

Kopiuj
Edytuj
npm install tailwindcss @tailwindcss/postcss
Konfiguracja PostCSS:

Kopiuj
Edytuj
// postcss.config.js
export default {
  plugins: ["@tailwindcss/postcss"],
};

Import Tailwind w CSS:

Kopiuj
Edytuj
/* styles.css */
@import "tailwindcss";

To podejście eliminuje potrzebę stosowania dyrektyw @tailwind i zewnętrznych wtyczek.

Konfiguracja oparta na CSS

Tailwind CSS v4.0 przenosi konfigurację z plików JavaScript do CSS, co upraszcza proces dostosowywania:

Kopiuj
Edytuj
/* styles.css */
@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  /* ... */
}

To podejście integruje proces konfiguracji bezpośrednio z arkuszami stylów.

Automatyczne wykrywanie zawartości

Tailwind CSS v4.0 automatycznie skanuje projekt w poszukiwaniu plików szablonów, eliminując konieczność ręcznej konfiguracji tablicy content. TAILWINDCSS.COM

Zmodernizowana paleta kolorów

Domyślna paleta kolorów została zaktualizowana do modelu kolorów oklch, co zapewnia szerszą gamę kolorów i bardziej żywe oraz dokładne barwy. TAILWINDCSS.COM

Dynamiczne wartości narzędzi i warianty

Wersja 4.0 wprowadza dynamiczne wartości narzędzi i warianty, umożliwiając bardziej elastyczne i dynamiczne stylizowanie bez dodatkowej konfiguracji:

Niestandardowe siatki:

Kopiuj
Edytuj
  <div class="grid grid-cols-15">
    <!-- ... -->
  </div>
Warianty atrybutów danych:

html
Kopiuj
Edytuj
  <div data-current class="opacity-75 data-[current]:opacity-100">
    <!-- ... -->
  </div>

Te funkcje pozwalają na bardziej elastyczne i dynamiczne stylizowanie bez dodatkowej konfiguracji.

Integracja z Vite

Dla użytkowników Vite, Tailwind CSS v4.0 oferuje oficjalną wtyczkę, która zapewnia lepszą wydajność i minimalną konfigurację:

Kopiuj
Edytuj
// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss()],
});

To rozwiązanie zapewnia jeszcze lepszą wydajność w porównaniu z użyciem wtyczki PostCSS.

Wnioski

Tailwind CSS v4.0 to znaczący krok naprzód w rozwoju frameworka, oferując ulepszenia wydajności, uproszczoną konfigurację i nowe funkcje, które ułatwiają pracę deweloperom. Zachęcam do przetestowania nowej wersji i skorzystania z jej usprawnień w nadchodzących projektach.

Tailwind CSS 4.0: Rewolucja w Prędkości i Konfiguracji