Tailwind CSS v4.0 veröffentlicht

• Tailwind CSS v4.0 veröffentlicht

  • Eine neue Version mit optimierter Performance und Flexibilität, die die Fortschritte der modernen Webplattform maximal nutzt
  • Mit einer neuen Hochleistungs-Engine werden vollständige Builds bis zu 5-mal schneller und inkrementelle Builds mehr als 100-mal schneller
  • Unter Nutzung moderner CSS-Funktionen für das moderne Web konzipiert

• Neue Hochleistungs-Engine

  • Tailwind CSS v4.0 ist eine vollständige Neufassung des Frameworks, bei der die Architektur optimiert wurde, um die Geschwindigkeit zu maximieren
  • Inkrementelle Builds sind mehr als 100-mal schneller und werden in Mikrosekunden abgeschlossen

• Für das moderne Web entwickelt

  • Nutzt aktuelle CSS-Funktionen wie native Cascade Layers, registrierte benutzerdefinierte Eigenschaften und color-mix()
  • Verwendet logische Eigenschaften, um die RTL-Unterstützung zu vereinfachen und die Größe des generierten CSS zu reduzieren

• Vereinfachte Installation

  • Der Installationsprozess wurde vereinfacht, Abhängigkeiten wurden reduziert, und es muss nur eine einzige Codezeile zur CSS-Datei hinzugefügt werden
  • Stellt die @import-Regel standardmäßig ohne externe Plugins bereit

• Vite-Plugin

  • Vite-Nutzer können Tailwind mit @tailwindcss/vite integrieren
  • Mit dem Vite-Plugin wird die Performance weiter verbessert

• Automatische Inhaltserkennung

  • Erkennt Template-Dateien automatisch, sodass keine Konfiguration erforderlich ist
  • Ignoriert Einträge aus der .gitignore-Datei automatisch, um unnötige Scans zu vermeiden

• Eingebaute Import-Unterstützung

  • Mit @import können andere CSS-Dateien inline importiert werden
  • Ein für Tailwind CSS optimiertes Import-System verbessert die Performance zusätzlich

• CSS-zentrierte Konfiguration

  • Projekte können statt in JavaScript direkt in CSS konfiguriert werden
  • Anpassungen sind direkt in der CSS-Datei möglich, ohne eine tailwind.config.js-Datei

• CSS-Theme-Variablen

  • Stellt Design-Tokens als CSS-Variablen bereit, sodass sie zur Laufzeit leicht referenziert werden können

• Dynamische Utility-Werte und Varianten

  • So vereinfacht, dass verschiedene Utilities und Varianten beliebige Werte akzeptieren können
  • Rastergrößen oder benutzerdefinierte Datenattribute lassen sich leicht festlegen

• Modernisierte P3-Farbpalette

  • Die Standardfarbpalette wurde von rgb auf oklch umgestellt und bietet lebendigere Farben

• Container Queries

  • Bietet standardmäßig eine API, mit der Elemente abhängig von der Containergröße gestylt werden können

• Neue 3D-Transform-Utilities

  • Fügt eine API hinzu, mit der Elemente im 3D-Raum transformiert werden können

• Erweiterte Gradient-API

  • Fügt Utilities zum Erzeugen linearer, konischer und radialer Verläufe hinzu

• Unterstützung für @starting-style

  • Fügt eine Funktion hinzu, mit der Eigenschaften beim ersten Anzeigen eines Elements ohne JavaScript überblendet werden können

• not-*-Variante

  • Fügt Unterstützung für die CSS-Pseudoklasse :not() hinzu

• Weitere neue Utilities und Varianten

  • Fügt verschiedene neue Utilities und Varianten hinzu, darunter inset-shadow-*, field-sizing und color-scheme

Tailwind CSS v4.0 ist die neueste Version mit maximaler Performance und Flexibilität und bietet zahlreiche neue Funktionen und Verbesserungen.

[GN⁺]

Hacker-News-Kommentare

• Die Entwicklung von Tailwind v4 wird positiv bewertet; ein großer Vorteil ist die Unterstützung von CSS-Variablen und einer reinen CSS-Konfiguration. Tailwind erfüllt nun seine Rolle als Utility sehr gut.

• CSS ist benutzerfreundlicher geworden als früher, und es kann einfacher sein, Stilattribute direkt in HTML zu verwenden. Manche möchten Stilattribute jedoch weiterhin vermeiden.

• Es ist gut, mit Tailwind Styles an einer Stelle lesen zu können. Die langen Klassennamen sind zwar da, aber es ist nützlich, weil sich Styles leicht anpassen lassen.

• Als jemand Tailwind zum ersten Mal kennengelernt hat, war es belastend, CSS noch einmal neu lernen zu müssen. Später wurde jedoch verstanden, dass es für Teamarbeit und Skalierbarkeit nützlich ist. Ein grundlegendes Stylesheet wird trotzdem weiterhin bevorzugt.

• In einem mit Tailwind umgesetzten Projekt war es angenehm, dass alles intuitiv und gut dokumentiert war. Dass man nicht über Namen für Styles nachdenken muss, spart Zeit.

• Mit dem neuesten Update von Tailwind haben sich die Build-Zeiten verkürzt, und eine JS-Konfiguration ist nicht mehr nötig. CSS kann nun den Großteil der Arbeit übernehmen.

• Es wurde versucht, Tailwind zu nutzen, aber das Ergebnis war nicht besser als mit Bootstrap. Nun wird darüber nachgedacht, wie sich ansprechende Resultate erzielen lassen, ohne Designer zu sein.

• Das saubere, aber generische Design von Tailwind ist weit verbreitet. Das zeigt die Vorteile und Grenzen von Inline-Styles bei Tailwind.

• Das Update auf Tailwind v4 hat sich auf bestehende Apps ausgewirkt. Wegen Kompatibilitätsproblemen muss weiterhin v3 verwendet oder das Build-Skript angepasst werden.