Vor einigen Monaten (zum Zeitpunkt des Verfassens dieses Artikels) hat Tailwind CSS seine Arbeit an Tailwind CSS v4.0 als Open-Source-Lösung veröffentlicht. (Sie können es hier auf GitHub finden).
Vor kurzem hat Tailwind eine öffentliche Betaversion für Tailwind CSS 4 angekündigt, und in diesem Artikel werde ich die Highlights der neuen Version behandeln. Also fangen wir an!
Tailwind hat seinen Motor einer Überarbeitung unterzogen, die die Leistung drastisch verbessert. Vollständige Builds sind bis zu 5x schneller, inkrementelle Builds sind bis zu 100x (Sie haben richtig gelesen) schneller.
Tailwind v4 verfügt außerdem über eine einheitliche Toolchain. Erinnern Sie sich daran, dass Sie in all Ihren Tailwind-Projekten Autoprefixer und PostCSS installieren mussten? Das müssen Sie nicht mehr!
Tailwind verfolgt einen interessanten Konfigurationsansatz und wechselt von JS-Konfigurationsdateien zur CSS-Konfiguration. Das bedeutet, dass Sie Plugins, Themes und anderes Verhalten direkt in Ihrem CSS konfigurieren.
Tailwind erhält auch Unterstützung für die neuesten Funktionen in CSS.
Jetzt, da die allgemeinen Änderungen hinter uns liegen, wollen wir sehen, was Tailwind konkret hinzufügt!
Wenn Sie Tailwind v4 ausprobieren möchten, sehen Sie sich die Erste-Schritte-Dokumente für v4 (Beta) an.
Wenn Sie Ihr Projekt einfach aktualisieren möchten, führen Sie einfach npx @tailwindcss/upgrade@next aus und Tailwind erledigt das für Sie. Seien Sie vorsichtig!Es kann zu Breaking Changes kommen.
Die Tailwind v4-Farbpalette basiert auf Oklch statt RGB. Das RGB-Farbsystem schränkt die Konsistenz auf allen Bildschirmen und die Lebendigkeit etwas ein. Da das oklch-Farbsystem mittlerweile weitgehend unterstützt wird, wird Tailwind v4 davon profitieren!
Tailwind v4 unterstützt jetzt standardmäßig Containerabfragen. Wenn Sie nicht wissen, was Containerabfragen sind, lassen Sie es mich erklären.
Sie kennen Dinge in Tailwind wie md:, sm: usw., mit denen Sie anpassen können, welches CSS auf verschiedene Bildschirmgrößen angewendet wird?
In diesen Fällen beziehen sich die Klassen auf die Größe eines Fensters. Bei Containerabfragen können sie sich stattdessen auf die Größe eines Containers beziehen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
|
Das obige ist der detaillierte Inhalt vonSpannende Updates in Tailwind v�. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!