Spannende Updates in Tailwind v�

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!

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 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.

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

Beste Codes ・ 23. November

#css #webdev #Programmierung #diskutieren

Jetzt, da die allgemeinen Änderungen hinter uns liegen, 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!Es kann zu Breaking Changes kommen.

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.

<div>



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

<h2>
  
  
  Feldgröße
</h2>

<p>Feldgrößenanpassung 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.<br>
Und Tailwind v4 unterstützt es!</p>

<p>Probieren Sie die Demo auf der Website von Tailwind aus.<br>
Sie können jetzt einfach die Klasse „Field-Sizing-Content“ zu Ihrem Textbereich hinzufügen, um sie zu verwenden.</p>
<h2>
  
  
  Nachkommen-Updates
</h2>

<p>Tailwind Stable (das wissen Sie vielleicht nicht) verfügt über eine *-Variante, mit der Sie <em>direkte</em> Kinder eines Elements mit einer Klasse ansprechen können. Zum Beispiel:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Die neue **-Variante in Tailwind v4 zielt auf <em>alle Nachkommen</em> ab:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<h2>
  
  
  Eingefügte Schatten (und Ringe)
</h2>

<p>Mit den Klassen „inset-shadow“ und „inset-ring“ ist es jetzt auch einfach, eingefügte Schatten und Ringe auf Elementen zu erstellen.<br>
</p>

<pre class="brush:php;toolbar:false"><Schaltfläche>



<p><img src="https://img.php.cn/upload/article/000/000/000/173363689867865.jpg" alt="Exciting updates in Tailwind v�"></p>


<hr>

<h2>
  
  
  Es gibt noch viel mehr!
</h2>

<p>Wenn Sie alle neuen Ergänzungen sehen möchten, gehen Sie zu https://tailwindcss.com/docs/v4-beta und schauen Sie sich sie an!</p><p>Dieser Beitrag ist ein #Diskussionsbeitrag! Deshalb habe ich es kurz gehalten; Ich möchte wissen, was du denkst!<br>
Ich weiß, dass viele von euch Tailwind-Hassern wahrscheinlich ein Feedback für mich haben werden?<br>
Es gibt definitiv einige kontroverse neue Funktionen und ich möchte ein paar Meinungen einholen?</p>

<p>Zusammenfassung: Hinterlassen Sie einen Kommentar!</p>


<hr>

<p>Danke fürs Lesen!<br>
BestCodes</p>


          

            
        

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!