Fortschritt von Tailwind CSS v4.0 als Open Source veröffentlicht

• Die neue Hochleistungs-Engine Oxide wird für Tailwind CSS v4.0 entwickelt.
• Sie wurde entwickelt, um die Developer Experience zu vereinfachen und die neuesten Entwicklungen der Web-Plattform zu nutzen.
• Ursprünglich war die Veröffentlichung als v3.x-Release geplant, man entschied sich jedoch, sie als v4.0 herauszubringen, da es sich um ein Framework der nächsten Generation handelt.
• Es befindet sich noch in einer frühen Phase und es bleibt noch viel zu tun, aber die erste öffentliche Alpha-Version wurde getaggt, sodass Experimente beginnen können.

Neue Engine, auf Geschwindigkeit ausgelegt

• Die neue Engine wurde von Grund auf neu geschrieben und bietet mit weniger Code mehr Geschwindigkeit.
• Sie liefert bis zu 10-mal schnellere Build-Zeiten; die Tailwind-CSS-Website kann in nur 105 ms und das Catalyst-UI-Kit in 55 ms gebaut werden.
• Die neue Engine hat eine um mehr als 35 % kleinere Installationsgröße, obwohl sie schwere native Pakete wie Rust und Lightning CSS enthält.
• Rust wird für die kostenintensivsten Teile des Frameworks eingesetzt, während der Core in TypeScript bleibt, um Erweiterbarkeit zu ermöglichen.
• Die neue Engine ist ausschließlich von Lightning CSS abhängig.
• Es wurde ein eigener CSS-Parser geschrieben und Datenstrukturen wurden so entworfen, dass das Parsing doppelt so schnell ist wie bei PostCSS.

Integrierte Toolchain

• Tailwind CSS v4 ist kein Plugin mehr, sondern ein All-in-one-Tool zur Verarbeitung von CSS.
• @import-Verarbeitung, Vendor Prefixing, Unterstützung für Verschachtelung und mehr sind eingebaut, sodass keine separate Konfiguration erforderlich ist.
• Moderne CSS-Funktionen wie oklch()-Farben und Bereiche für Media Queries werden in Syntax mit besserer Browser-Unterstützung umgewandelt.
• Ein PostCSS-Plugin wird weiterhin angeboten, außerdem werden Bundler-Plugins evaluiert; zusammen mit dem ersten Alpha-Release wird ein offizielles Vite-Plugin bereitgestellt.

Für das moderne Web entwickelt

• Tailwind CSS v4 zielt darauf ab, ein Framework zu schaffen, das sich auch in den kommenden Jahren modern anfühlt.
• Es verwendet echte @layer-Regeln, um Spezifitätsprobleme zu lösen, die in der Vergangenheit problematisch waren.
• Mit @property werden interne benutzerdefinierte Eigenschaften klar definiert und Effekte wie Hintergrundverläufe ermöglicht.
• color-mix erleichtert die Anpassung der Opazität von Farbvariablen oder die Opazitätssteuerung von currentColor.
• Container Queries werden direkt im Core unterstützt, einschließlich Bereichen für Container Queries über neue Varianten @min-* und @max-*.

Kombinierbare Varianten

• Die neue Architektur ermöglicht es, Varianten, die auf unterschiedliche Selektoren wirken, gemeinsam zu kombinieren.
• In früheren Versionen mussten Varianten wie group-has-* explizit im Framework definiert werden, jetzt kann group-* mit der bestehenden Variante has-* kombiniert werden.

Zero-Config-Content-Erkennung

• Im ersten Alpha-Release können content-Pfade nicht konfiguriert werden, und in den meisten Projekten wird das auch künftig nicht nötig sein.
• Bei Verwendung des PostCSS-Plugins oder der CLI crawlt Tailwind das gesamte Projekt, um Template-Dateien zu finden.
• Bei Verwendung des Vite-Plugins wird auf den Modulgraphen zurückgegriffen, um genau zu wissen, welche Dateien tatsächlich genutzt werden.

CSS-first-Konfiguration

• Ein zentrales Ziel von Tailwind CSS v4.0 ist es, das Framework so wirken zu lassen, als sei es nativ in CSS zu Hause, und nicht wie eine JavaScript-Bibliothek.
• Nach der Installation wird es mit einer normalen CSS-@import-Anweisung zum Projekt hinzugefügt.
• Statt alle Anpassungen in einer JavaScript-Konfigurationsdatei festzulegen, werden CSS-Variablen verwendet.

Geänderte Punkte

• Breaking Changes werden nicht leichtfertig vorgenommen, aber in v4 gibt es einige Dinge, die anders behandelt werden.
• Nicht mehr dokumentierte Utilities werden entfernt.
• Das PostCSS-Plugin und die CLI werden als separate Pakete bereitgestellt.
• Die Standard-Rahmenfarbe wird entfernt.
• Die ring-Utility ist standardmäßig nun ein 1px-Ring, der currentColor verwendet.

Roadmap zu v4.0

• Die neue Engine wurde von Grund auf neu geschrieben und konzentriert sich vollständig auf die Developer Experience mit einem neuen Konfigurationsansatz.
• Abwärtskompatibilität wird als sehr wichtig angesehen und ist eine zentrale Aufgabe auf dem Weg zur stabilen v4.0-Version.
• Dazu gehören Unterstützung für JavaScript-Konfigurationsdateien, explizite Konfiguration von Content-Pfaden, weitere Dark-Mode-Unterstützung, Unterstützung für Plugins und benutzerdefinierte Utilities, Konfiguration von Klassenpräfixen, Unterstützung für Safelists und Blocklists, Unterstützung für die important-Konfiguration, Unterstützung für die Funktion theme(), Unterstützung für eine Standalone-CLI und mehr.

Alpha-Version ausprobieren

• Es wurden bereits mehrere Alpha-Releases getaggt, und Experimente im eigenen Projekt können ab heute beginnen.
• Wer die Erweiterung Tailwind CSS IntelliSense verwendet, muss auf der VS-Code-Erweiterungsseite auf die Pre-Release-Version wechseln.
• Wenn Probleme entdeckt werden, wird darum gebeten, diese auf GitHub zu melden.

Vite verwenden

• Die Tailwind-CSS-v4-Alpha und das neue Vite-Plugin werden installiert.
• Das Plugin wird zur Datei vite.config.ts hinzugefügt.
• Tailwind wird in der Haupt-CSS-Datei importiert.

PostCSS verwenden

• Die Tailwind-CSS-v4-Alpha und das separate PostCSS-Plugin-Paket werden installiert.
• Das Plugin wird zur Datei postcss.config.js hinzugefügt.
• Tailwind wird in der Haupt-CSS-Datei importiert.

CLI verwenden

• Die Tailwind-CSS-v4-Alpha und das separate CLI-Paket werden installiert.
• Tailwind wird in der Haupt-CSS-Datei importiert.
• Mit dem CLI-Tool wird das CSS kompiliert.

Meinung von GN⁺

• Die Open-Source-Veröffentlichung von Tailwind CSS v4.0 gibt der Entwickler-Community die Möglichkeit, neue Funktionen und Verbesserungen frühzeitig auszuprobieren. Das bedeutet, dass Entwickler Feedback zum Framework geben und zu einem stabileren finalen Release beitragen können.
• Die Leistungsverbesserungen der neuen Engine scheinen die Build-Zeiten deutlich zu verkürzen, was besonders bei großen Projekten oder in Umgebungen mit schnellen Entwicklungszyklen nützlich sein dürfte.
• Die Kombination aus Rust und TypeScript spiegelt einen modernen Ansatz wider, der gleichzeitig auf Performance und Erweiterbarkeit abzielt. Die in Rust geschriebenen Teile maximieren die Leistung, während TypeScript es Entwicklern erleichtert, zu erweitern und zu warten.
• Die neue Konfigurationsmethode mit CSS-Variablen ist CSS-freundlicher als bisherige JavaScript-basierte Einstellungen und könnte die Integration mit Designsystemen erleichtern.
• Diese Änderungen können für bestehende Nutzer zwar gewissen Migrationsaufwand bedeuten, dürften langfristig jedoch zu einer schlankeren und leichter wartbaren Codebasis führen.

[GN⁺]

Hacker-News-Kommentare

• Tailwind CSS ist das zweitbeste, was dem Frontend je passiert ist; nur Vue 3 übertrifft es.

  • Kein Aufwand mehr für das Benennen von CSS-Klassen, keine doppelten CSS-Codes und keine Konflikte zwischen Klassen.
  • Der gesamte Code befindet sich in einer Datei, sodass man eine Komponente allein durch Lesen des Codes visualisieren kann.
  • Ich werde nicht zu SCSS zurückkehren und halte die Kombination aus Vue 3, TailwindCSS und Vite für die beste.

• Als entschiedener Kritiker von Tailwind ist alles, was unter der CSS-first-Konfiguration angekündigt wurde, sehr zu begrüßen.

  • Man kann Tailwinds Design-Tokens, Resets usw. nutzen und über echtes CSS anpassen.
  • Es wird ein neuer Weg aufgezeigt, Tailwind "leichtgewichtig" zu verwenden, ohne die moderne Architektur von CSS, die Cascade oder sogar das Shadow DOM von Web Components aufzugeben.

• CTRL+u zeigt ein gutes Beispiel für die Syntax.

  • Zum Beispiel braucht man eine intuitive Ein-Zeilen-Lösung, um eine Box mit abgerundeten Ecken sowie obere und untere Abschnitte zu erstellen.

• An der Standalone-CLI wird noch gearbeitet, aber sie soll vor dem Release von v4.0 auf jeden Fall fertig werden.

  • Wenn man den Rest der Release-Ankündigung betrachtet, gehe ich davon aus, dass sie in Rust gebaut wird.
  • Ich würde es bevorzugen, kein Node einzubetten, insbesondere wenn man sich dabei auf Vercels inzwischen aufgegebenes Tool pkg stützt.

• Es gibt viele vielversprechende Verbesserungen.

  • Am meisten freue ich mich auf die Möglichkeit, Themes über CSS statt über JS-Erweiterungen zu steuern.

• Ich hoffe, Tailwind unterstützt attributify wie unocss.

  • Das ist für komplexe Layouts deutlich besser lesbar.

• Ich bin kein Frontend-Entwickler, pflege aber einige Websites, und sie alle verwenden Tailwind.

  • Die Maintainer von Tailwind haben ein sehr gutes Gespür dafür, wie sie Prioritäten setzen müssen, und besitzen einen ausgezeichneten Design-Sinn.
  • Tailwind versteht man erst wirklich, wenn man es selbst ausprobiert, aber mit jeder Version liefern sie ein noch ausgereifteres Produkt.
  • In dieser Version hat sich im Hinblick auf Kompatibilität zwar nicht viel geändert, aber sobald Version 4 offiziell wird, könnten noch mehr Änderungen kommen.
  • Die Aussicht auf die neue Engine ist sehr cool, und schnellere Build-Zeiten sind immer willkommen.

• Ich frage mich, ob es gute Tutorials oder Guides zu Tailwind gibt.

• Ich frage mich, ob jemand tailwindcss zusammen mit htmx oder anderen HATEOAS-Ansätzen verwendet.

  • Hypertext sollte eigentlich nichts mit Styling zu tun haben, aber etwas wie Tailwind könnte damit in Konflikt stehen.
  • CSS und HATEOAS passen perfekt zusammen, weil Markup und Styling getrennt sind, aber ich frage mich, wie man das bei etwas wie tailwindcss handhabt.

• Ich wollte es in einem Demo-Projekt verwenden, aber import from "node:@tailwindcss/postcss@latest" löst einen Fehler zum exports-Feld in der package.json aus.

  • Trotzdem wird im Blogpost erwähnt, dass man postcss-import nicht verwenden müsse, es ist aber weiterhin als Abhängigkeit enthalten.