Frischer Wind: CSS-Framework Tailwind 3.0 ist mit JIT-Compiler erschienen

TailwindCSS 3.0 ist erschienen und bricht mit der alten AOT-Engine (Ahead-of-Time), der Just-in-Time-Modus (JIT) ist ab sofort bei dem Framework der neue Standard. Mit dem JIT-Compiler setzt das Tailwind-Team auf Geschwindigkeit durch beispielsweise reguläre Ausdrücke. Caching spielt auch wieder eine größere Rolle, so speichert beispielsweise ein LRU-Match neben dem heuristischen Auslesen Matches in einzelnen Zeilen, was zu kürzeren inkrementellen Build-Zeiten führen soll.

Utility und HTML first

Der Fokus bei dem Framework liegt darauf, das Styling direkt aus dem Markup vorzunehmen, statt den Komponenten bestimmte CSS-Klassen zuzuordnen. Diesem Geist entsprechen auch die meisten der neuen Features.

Das Major Release bringt Entwicklerinnen und Entwicklern laut Herausgebern eine breite Auswahl neuer Funktionen wie das native Gestalten von Formularen nach eigenen Vorstellungen oder eine Schnittstelle für das Scroll-Snapping mit reinem CSS (Cascading Style Sheets), neue CSS-Eigenschaften und ein experimentelles Content Delivery Network (Play CDN). Neu ist auch die Möglichkeit, Webseitentext mit farbigen Unterstreichungen aufzuhübschen und die Printausgabe von Webseiten direkt aus dem HTML-Code heraus stärker zu steuern. Ein Codebeispiel verdeutlicht, worum es geht:

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    Are you seriously trying to print this? It's secret!
  </div>
</div>

Darüber hinaus enthält das Release ein mehrspaltiges Layout im Stil gedruckter Zeitungen (beispielsweise für Online-Newspaper). Mit folgendem Code

<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>

lässt sich die Spaltenansicht im Web festlegen:

Performance, Kosmetik und Fifty Shades of Gray

Auch die Schreibrichtung lässt sich in Tailwind 3.0 steuern – von links nach rechts (LTR) oder wie beispielsweise in Arabisch und Hebräisch von rechts nach links (RTL). Dieses Feature gilt jedoch noch als experimentell. Darüber hinaus hebt der ankündigende Blogeintrag visuelle Aspekte hervor bei Funktionen zum individuelleren Designen von Webseiten. Demzufolge soll das verfügbare Farbspektrum stark erweitert sein (every color out of the box), und Elemente wie Knöpfe oder Boxen lassen sich neuerdings mit farbigen Schatten unterlegen. Dieses Feature war laut Blogpost stark gefragt, aber offenbar technisch schwer umzusetzen.

Die Farbpalette war den Tailwind-Entwicklern zufolge aus gutem Grund bislang begrenzt gewesen: Vor dem Einführen der neuen Engine galt es, die Größe der CSS-Dateien möglichst gering zu halten, weshalb laut Blogeintrag zugunsten einer besseren Performance bei der Auswahl an Farben Abstriche in Kauf zu nehmen waren. Version 3.0 des Frameworks hingegen halte nun jegliche Farbe der erweiterten Palette standardmäßig bereit, einschließlich fein abgestufter Grautöne (oder in den Worten des Teams: "fifty shades of gray").

Neue Dokumentation und weiterführende Hinweise

Tailwind Labs hält den Quellcode des Frameworks auf GitHub bereit. Wer bei der Fülle an Neuem Orientierung sucht oder sich erstmals in Tailwind vertiefen mag, denen bietet das Tailwind-Team eine überarbeitete Dokumentation zur Arbeit mit dem CSS-Framework. Wissenswertes zum Major Release mit Links zu vertiefenden Informationen und Codebeispielen listet am übersichtlichsten der Blogeintrag zur Ankündigung von Tailwind 3.0 auf.

(sih)