tailwind CSS v4.0: der perfekte Game-Changer für moderne Webentwicklung [Übersetzung]

• Das wichtigste Merkmal von v4.0 ist die verbesserte Performance: vollständige Builds sind bis zu 5-mal schneller, inkrementelle Builds sogar mehr als 100-mal
• CSS-first-Konfiguration als Paradigmenwechsel: Konfiguration direkt in CSS statt in tailwind.config.js
• Steuerung der Stil-Priorität mit @layer
• Mit der Regel @property lassen sich benutzerdefinierte Eigenschaften definieren
• Mit der Funktion Color-Mix() kann die Transparenz aller Farbwerte angepasst werden, einschließlich CSS-Variablen und currentColor
• Durch logische Eigenschaften wie margin-inline statt margin-left und margin-right lässt sich alles auf einmal verarbeiten, wodurch die RTL-Unterstützung deutlich einfacher wird
• Vereinfachter Installationsprozess: npm i tailwindcss @tailwindcss/postcss export default { plugins: ["@tailwindcss/postcss"],}; @import "tailwindcss"; und fertig
• Automatische Content-Erkennung: .gitignore sowie Binärdateien wie Bilder/Videos werden jetzt automatisch ignoriert, relevante Dateien automatisch gescannt. @source wird für Ausnahmen unterstützt
• Vordringliche Unterstützung für das Vite-Plugin
• Durch dynamische Utility-Generierung können Werte, die in der bisherigen Konfiguration nicht vorhanden waren, direkt verwendet werden
• Weiterentwickeltes Farbsystem: Die gesamte Standard-Farbpalette wurde von RGB auf OKLCH umgestellt
• Container Queries sind in das Framework integriert
• Unterstützung für 3D-Transforms und verbesserte Gradients hinzugefügt
• Neue Variants und Utilities enthalten: not-*, starting, inert, nth-*, descendant-Variants sowie field-sizing, color-scheme, inset-shadow-*-Utilities
• Einfachere Migration als erwartet: Die meisten Änderungen lassen sich automatisch upgraden
• Das große Bild, das tailwind zeichnet: mehr als nur ein Framework-Update, sondern ein mutiger Vorstoß in die Zukunft von CSS
• Sollte man upgraden? Für neue Projekte ist v4.0 die richtige Wahl. Bestehende Projekte lassen sich leicht upgraden, wenn der Service auf aktuelle Browser ausgerichtet ist
• Fazit: tailwind CSS v4.0 ist nicht nur Evolution, sondern eine Revolution

[labeldock]

Nachdem ich Tailwind angewendet und ein Jahr lang benutzt habe
Würde ich es im nächsten Projekt verwenden? YES
Ist es ein Game Changer für die Webentwicklung? NO

Der Ausdruck „Game Changer“ ist übertrieben, deshalb schreibe ich diesen Kommentar.
Ich finde, es ist schwer, das als progressiven Stil festzulegen, auf den wir künftig hinarbeiten sollten.

Tailwind hat zwar Vorteile beim Kopieren und Einfügen von Templates, bei einfacher Generierung per AI und bei kleinen Style-Anpassungen, aber

selbst gut lesbare Tags werden dadurch unübersichtlich, und es ist auch schwierig, ein von Designern erstelltes Design präzise nachzubauen. Ich denke außerdem, dass es sich vom Schwierigkeitsgrad her kaum von Inline-Styles unterscheidet, wenn man nur die CSS-Variablen sauber definiert.

[bluekai17]

Bitte unterstützt rn..

[iolothebard]

Geh nicht zu weit … Es könnte alles verschlingen …

[ng0301]

Ich werde wohl erst mal 3.x nutzen und dann migrieren, wenn es wirklich zum großen Trend wird.

[savvykang]

https://tailwindcss.com/docs/upgrade-guide

• shadow-sm -> shadow-xs
• shadow -> shadow-sm

Man kann wohl kaum vorhersagen, welche Kompatibilität sie in der nächsten Version wieder brechen werden.

[cocofather]

Ständig.kommen.neue.Webtechnologien.auf.den.Markt.
Die.bestehenden.Technologien.sind.bereits.ausreichend.
Mit.C.Assembly.HTML.und.JavaScript.allein.ist.alles.möglich.

[bokjjang]

Verwenden Sie immer noch keine Excel-Funktionen?
Mit einem Taschenrechner geht das doch auch alles.

Aber warum verwendet man Punkte statt Leerzeichen?

[mse9000]

Das ist ein Teil des altmodischen „Boomer-Stils“.
Scheint eine Parodie darauf zu sein, dass ältere Leute statt Leerzeichen oft Punkte eingeben..

[codemasterkimc]

Herr Kim. Ich möchte mir erlauben, Ihnen einen Rat zu geben. Es geht um nichts anderes, als darum, dass Sie nicht zu viele Excel-Funktionen verwenden sollten. Wenn es Bequemlichkeit gibt, steigt auch das Risiko. Um ein Rind zu schlachten, gibt es eine entsprechende Klinge – braucht man zum Hühnerschlachten wirklich ein Messer? Das Einfache kann die richtige Antwort sein.

[swooooooo]

Hahahaha, das ist so lustig.

[illiil1lii]

Bestehende Projekte lassen sich problemlos upgraden, wenn der Service auf aktuelle Browser abzielt.

😅

[ahwjdekf]

Man spricht von Vereinfachung und Upgrade, aber am Ende heißt es doch nur, wieder etwas Neues zu lernen. Genau das ist es.