Vor einigen Monaten (zum Zeitpunkt des Verfassens dieses Artikels) hat Tailwind CSS seine Arbeit an Tailwind CSS v4.0 als Open Source veröffentlicht. (Sie können es hier auf GitHub finden).

Kürzlich hat Tailwind eine öffentliche Beta für Tailwind CSS 4 angekündigt, und in diesem Artikel werde ich die Highlights der neuen Version behandeln. Also fangen wir an!

Allgemeine Strukturänderungen

Tailwind hat seinen Motor einer Überarbeitung unterzogen, die die Leistung drastisch verbessert. Vollständige Builds sind bis zu 5x schneller, inkrementelle Builds 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 tun!

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.

CSS hat ein neues Logo (und neue Funktionen)! ?

Beste Codes ・ 23. November

#css #webdev #Programmierung #diskutieren

Jetzt, da die allgemeinen Änderungen erledigt sind, wollen wir sehen, was Tailwind konkret hinzufügt!

Neue Funktionen?

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! Möglicherweise gibt es wichtige Änderungen.

Farben

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!

Containerabfragen

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.

Im obigen Beispiel hat das Raster drei Spalten – nicht, wenn das Fenster die kleine Größe erreicht, sondern wenn der Container die kleine Größe erreicht. Wie Sie sich vorstellen können, ist dies in responsiven Layouts sehr praktisch.


  
  
  Feldgröße


field-sizing ist noch keine allgemein unterstützte CSS-Funktion, aber es wird großartig sein, wenn es so ist! Anstatt JS zum Erstellen von Textbereichen mit automatischer Größenänderung zu benötigen, können Sie nur CSS verwenden.

Und Tailwind v4 unterstützt es!

Probieren Sie die Demo auf der Website von Tailwind aus.

Sie können jetzt einfach die Klasse „Field-Sizing-Content“ zu Ihrem Textbereich hinzufügen, um sie zu verwenden.

  
  
  Nachkommen-Updates


Tailwind Stable (Sie wissen das vielleicht nicht) hat eine *-Variante, die es Ihnen ermöglicht, direkte Kinder eines Elements mit einer Klasse anzusprechen. Zum Beispiel:







Die neue **-Variante in Tailwind v4 zielt auf alle Nachkommen ab:








  
  
  Eingefügte Schatten (und Ringe)


Mit den Klassen „inset-shadow“ und „inset-ring“ ist es nun auch einfacher, eingefügte Schatten und Ringe auf Elementen zu erstellen.













  
  
  Es gibt noch viel mehr!


Wenn Sie alle neuen Ergänzungen sehen möchten, gehen Sie zu https://tailwindcss.com/docs/v4-beta und schauen Sie sich sie an!

Dieser Beitrag ist ein #Diskussionsbeitrag! Deshalb habe ich es kurz gehalten; Ich möchte wissen, was du denkst!

Ich weiß, dass viele von euch Tailwind-Hassern wahrscheinlich ein Feedback für mich haben werden?

Es gibt definitiv einige kontroverse neue Funktionen und ich möchte ein paar Meinungen einholen?

Zusammenfassung: Hinterlassen Sie einen Kommentar!




Danke fürs Lesen!

BestCodes