Was ist neu in Tailwind CSS v3
Tailwind CSS v3.0.0-alpha.1
Die erste Alpha-Version von Tailwind CSS v3.0 ist da! Wenn Sie sich nicht einmal darum kümmern, was sich geändert hat, und es einfach sofort verwenden möchten, installieren Sie es über npm:
|_+_|
Wenn Sie @tailwindcss/typography oder @tailwindcss/forms verwenden, sollten Sie diese Pakete ebenfalls aktualisieren:
|_+_|
Wir haben auch einen brandneuen CDN-Build, mit dem Sie spielen können, wenn Sie möchten.
Denken Sie daran, dass dies eine Alpha-Version ist , also könnten einige Dinge kaputt sein. Ich kenne sie nicht, sonst hätte ich sie repariert, aber du wirst sie finden! Probieren Sie es aus, machen Sie es kaputt und erzählen Sie mir davon, wenn Sie es tun, damit wir dieses Ding für eine richtige Version v3.0 später in diesem Jahr wirklich kampferprobt bekommen können.
Was gibt's Neues
Was hat sich geändert
Wir haben uns sehr bemüht, die Breaking Changes auf ein Minimum zu beschränken, und dies sollte ein wirklich reibungsloses Upgrade sein – insbesondere, wenn Sie bereits die JIT-Engine verwenden.
wie man gegenstände in rost spawnt
Beginnen Sie, indem Sie die Änderungen des Just-in-Time-Modus in der Dokumentation lesen, und kehren Sie dann für ein paar weitere Schritte hierher zurück.
|_+_| hat sich geändert zu |_+_|
Die JIT-Engine verwendet PurgeCSS nicht wirklich unter der Haube, also |_+_| fühlt sich nicht mehr wie der richtige Name für diese Konfigurationsoptionen an.
Nun sollte diese Konfiguration so aussehen:
|_+_|Bei komplexeren Konfigurationen sollte es in etwa so aussehen:
|_+_|Wir haben uns sehr bemüht, Tailwind schlau genug zu machen, um auch die alte Konfiguration zu verstehen, also sollte Ihre bestehende Konfiguration mit etwas Glück immer noch funktionieren, aber Sie sollten auf das neue Format aktualisieren, um die lästigen Konsolenwarnungen, die wir Ihnen entgegenschleudern, zum Schweigen zu bringen mit.
Farbname ändert sich
Als Teil der standardmäßigen Aktivierung der erweiterten Farbpalette mussten einige Farbnamen aufgrund von Kollisionen geändert werden.
In der Pull-Anforderung finden Sie alle Details, die Sie für das Upgrade benötigen. Es sollten nur ein paar Codezeilen in Ihrem |_+_| sein Datei.
|_+_| hat sich geändert zu |_+_|
Diese verdammten Browser-Entwickler haben ein echtes |_+_| hinzugefügt -Eigenschaft, also mit |_+_| für |_+_| ist jetzt eine ganz schlechte idee.
Wir haben es in |_+_| und jetzt in |_+_| umbenannt fügt |_+_| hinzu wie Sie es erwarten würden. Wir haben auch |_+_| umbenannt zu |_+_|, aber |_+_| funktioniert immer noch heimlich.
|_+_|PostCSS 7 wird nicht mehr unterstützt
Wenn Sie die |_+_| da Sie bei PostCSS 7 hängen bleiben, müssen Sie auf PostCSS 8 aktualisieren, bevor Sie auf Tailwind CSS v3.0.0-alpha.1 aktualisieren können.
aol-mail auf android
Ich denke, das ist meistens |_+_| Benutzer, und zum Glück stehen sie kurz vor der Veröffentlichung einer neuen Version, die Webpack 5 verwendet und standardmäßig PostCSS 8 unterstützt.
Just-in-Time-CDN
Etwas, das an unseren CDN-Builds immer scheiße war, war, dass wir immer jede Menge toller Funktionen deaktivieren mussten, um die Dateigröße auf etwas zu beschränken, das der Browser bereit war zu analysieren.
Für Tailwind CSS v3.0 machen wir es anders. Inspiriert von einigen großartigen Arbeiten, die Marcel Pociot an tailwindcss-jit-cdn geleistet hat, haben wir eine JS-Bibliothek erstellt, die Tailwind im Browser kompiliert und MutationObserver verwendet, um alle von Ihnen verwendeten Klassen zu verfolgen.
redux form reagieren nativ
Es lässt Sie alle Funktionen nutzen, die Tailwind CSS zu bieten hat, und tut dies in 93 KB – was nicht schlecht ist für etwas, das ursprünglich für die Ausführung in Knoten ohne jegliche Überlegungen zur Dateigröße entwickelt wurde.
Das Just-in-Time-CDN ist nur für Entwicklungszwecke vorgesehen und sollte nicht in der Produktion verwendet werden.
Um es auszuprobieren, wirf dieses |_+_| Tag in Ihrem |_+_|:
|_+_|Wir werden ihm in Zukunft eine dauerhaftere URL geben, aber das ist gut genug für die Alpha.
Verwenden von Plugins von Erstanbietern
Plugins von Erstanbietern können automatisch mit |_+_| geladen werden Abfrageparameter:
|_+_|Die |_+_| Der Parameter akzeptiert eine durch Kommas getrennte Liste von Plugins, und Sie können optional eine Versionsnummer oder einen Bereich für jedes Plugin angeben, zum Beispiel |_+_|
Anpassen Ihrer Konfiguration
Um Ihre Tailwind-CSS-Konfiguration anzupassen, überschreiben Sie |_+_|:
|_+_|Hinzufügen von benutzerdefiniertem CSS
Verwenden Sie |_+_| -Elemente, um benutzerdefiniertes CSS hinzuzufügen, das Sie mit Tailwind verarbeiten möchten:
|_+_|GitHub: https://github.com