TailwindCSS ist raus.

Tailwind CSS verabschiedet sich aus der Beta-Phase und veröffentlicht offiziell die Version 4.0!

Die Version v4.0 wurde offiziell am 22. Januar 2025 (US Eastern Standard Time) veröffentlicht. UTC/GMT -5 Stunden.

Leistung und Benchmark-Ergebnisse

Eines der Highlights von Tailwind CSS v4.0 ist die neue Hochleistungs-Engine. Durch eine vollständige Neufassung der Architektur berichtete das Entwicklungsteam über deutliche Verbesserungen bei den Bauzeiten und inkrementellen Wiederherstellungsgeschwindigkeiten.

构建类型	v3.4 (中位数)	v4.0 Beta (中位数)	性能提升倍数
**完整构建**	378ms	100ms	3.78倍
**增量重建 (新增 CSS)**	44ms	5ms	8.8倍
**增量重建 (无新增 CSS)**	35ms	192µs	182倍

Die Tabelle zeigt, dass ohne das Hinzufügen neuer CSS-Inhalte die Reaktionszeit der inkrementellen Rekonstruktion Mikrosekunden erreichen kann, wodurch die Entwicklungseffizienz erheblich verbessert wird.

Wichtige Änderungen

Dank des neuen reinen CSS-First-Ansatzes müssen Sie sich nicht mehr mit der Komplexität der JS-Anpassung befassen.

Tailwind CSS v4.0 bietet eine leistungsstarke und zukunftssichere Architektur, bei der Geschwindigkeit, Einfachheit und eine tiefere Ausrichtung auf native CSS-Standards im Vordergrund stehen. Mit CSS-First-Konfiguration, nativen kaskadierenden Ebenen, erweiterten 3D-Transformationsdienstprogrammen und optimierten Verlaufsworkflows verschiebt Tailwind CSS weiterhin die Grenzen des Utility-First-Designs.

CSS-Prioritätskonfiguration

Eine bahnbrechende Verbesserung von Tailwind CSS v4.0 ist die CSS-Prioritätskonfiguration. Anstatt ein dediziertes tailwind.config.js zu verwenden, können Entwickler Design-Tokens mithilfe der @theme-Regel direkt in CSS deklarieren:

<code>@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-400: oklch(0.92 0.19 114.08);
  /* ... */
}</code>

Automatische Quellcodeerkennung

Tailwind CSS v4.0 reduziert die Notwendigkeit, content Arrays manuell zu konfigurieren. Standardmäßig werden Quelldateien auf Basis gängiger Heuristiken gescannt, wobei Pfade oder Mediendateien innerhalb von .gitignore automatisch ausgeschlossen werden. Bei Bedarf können spezifische Quellen hinzugefügt werden über:

<code>@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";</code>

Integrierte CSS-Übersetzung und -Import

In Version 4.0 verarbeitet die Lightning-CSS-Integration nahtlos Anbieterpräfixe, Funktionsübersetzung und Komprimierung. Früher haben sich Entwickler möglicherweise auf postcss-import oder autoprefixer verlassen; jetzt werden diese nicht mehr benötigt:

<code>@import "tailwindcss";</code>

--

Referenzlink

https://www.php.cn/link/2784c762da784d9adece645ff9e61637
https://www.php.cn/link/7aaca7ed25a9290e1953a69e401d924c
https://www.php.cn/link/b27152e13b5ed9b61478a1384d7b9bf2
https://www.php.cn/link/c07d101913fe4982e90874d6747e4e59

Das obige ist der detaillierte Inhalt vonTailwindCSS ist raus.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!