Utility-first-Frameworks helfen uns, unsere Webseiten schneller zu gestalten, und Tailwind CSS ist zu einem der beliebtesten Frameworks geworden. Aber beliebt zu sein bedeutet nicht, dass es perfekt ist.

Es gab einige Herausforderungen bei der Verwendung von Tailwind CSS, wie z. B. ein riesiges Stylesheet während der Entwicklung und die Notwendigkeit, zusätzliche Varianten selbst zu aktivieren, um nur einige zu nennen. Die Lösung für einige dieser Herausforderungen wird unser Hauptaugenmerk in diesem Tutorial sein.

In diesem Tutorial werden wir über eine sehr wichtige Funktion des Tailwind CSS-Frameworks sprechen, den Just-in-Time-Compiler, der auch als JIT-Compiler bezeichnet wird.

Wir zeigen dir die Funktionen und Vorteile des Tailwind CSS JIT-Compilers, wie du ihn aktivierst und sehen uns einige praktische Beispiele an.

Fangen wir an.

Was ist der Tailwind CSS JIT (Just-in-Time) Compiler?

Bevor wir über den Just-in-Time-Compiler sprechen, müssen wir zunächst über Tailwind CSS sprechen.

Tailwind CSS ist ein utilitaristisches CSS-Framework mit einer Reihe von vordefinierten CSS-Klassen, die direkt in unserem Markup angewendet werden können, um die Gestaltung von Webseiten zu beschleunigen und die Konsistenz des Designs mithilfe vordefinierter Systeme zu gewährleisten.

Vor der Veröffentlichung des JIT-Compilers betrug die Größe der generierten Tailwind-CSS-Datei nach der Installation in der Regel bis zu 3 MB. Wenn du Tailwind weiter konfigurierst und anpasst, wird die Dateigröße jedoch immer größer – in manchen Fällen kann ein Stylesheet bis zu 15 MB groß sein.

Obwohl alle unbenutzten Styles während der Produktion gelöscht werden, ist das während der Entwicklung nicht der Fall. Bei einem Stylesheet, das 10 MB oder sogar 20 MB groß ist, sind Probleme vorprogrammiert und unsere Entwicklungswerkzeuge geraten ins Stocken.

Mit dem JIT-Compiler werden die Styles während der Erstellung unserer Projekte generiert. Das bedeutet, dass nur die Utility-Klassen, die du gerade verwendest, in der Größe deines Stylesheets enthalten sind und nicht alle Utility-Klassen, die mit Tailwind CSS geliefert werden.

Vorteile der Verwendung des Tailwind CSS JIT-Modus

In diesem Abschnitt gehen wir auf einige der Vorteile des JIT-Compilers ein. Dazu gehören:

  1. Dein Stylesheet ist in der Entwicklung und in der Produktion identisch.
  2. Schnellere Erstellungszeit.
  3. Alle Varianten sind standardmäßig aktiviert.
  4. Die Kompilierung während der Entwicklung ist viel schneller.
  5. Nur verwendete Styles werden generiert.
  6. Varianten können gestapelt werden.
  7. Verbesserte Leistung der Entwicklungswerkzeuge.

Nachteile der Verwendung des Tailwind CSS JIT-Compilers

Die derzeit bekannten Einschränkungen laut der GitHub-Dokumentation des JIT-Compilers sind:

  • Erweiterte PurgeCSS-Optionen werden nicht unterstützt.
  • „Du kannst nur @apply Klassen erstellen, die Teil des Kerns sind, von Plugins generiert oder in einer @layer Regel definiert wurden. Beliebige CSS-Klassen, die nicht in einer @layer Regel definiert sind, kannst du nicht @apply.“
  • Es gibt nur Unterstützung für PostCSS 8.

Die Direktive @apply wird verwendet, um Hilfsklassen in unserem benutzerdefinierten CSS anzuwenden. Dies ist nützlich, wenn wir benutzerdefinierte CSS-Stile definieren, aber lieber bereits definierte Hilfsklassen verwenden möchten. @apply ist ein Beispiel dafür, wie die Direktive funktioniert:

.my-custom-css {
  @apply text-green-500;
}

Im obigen Code haben wir einer benutzerdefinierten CSS-Klasse eine grüne Farbe hinzugefügt. Die grüne Farbe wurde mit einer Hilfsklasse von Tailwind hinzugefügt.

So aktivierst du den Tailwind CSS JIT-Modus

Beachte, dass zum Zeitpunkt der Erstellung dieses Artikels bereits Tailwind CSS Version 3 veröffentlicht wurde und standardmäßig aktiviert ist, wenn du Tailwind CSS installierst. Die folgenden Erläuterungen zur Aktivierung des JIT-Compilers gelten nicht für Version 3 und höher. Alle anderen Beispiele, die in diesem Tutorial behandelt werden, sind mit Version 3 kompatibel.

Es ist ziemlich einfach, den JIT-Compiler zu aktivieren. Du musst nur deine Datei tailwind.config.js aktualisieren, indem du die Eigenschaft mode hinzufügst, die den Wert „jit“ haben sollte.

So sollte deine tailwind.config.js aussehen:

module.exports = {
  mode: 'jit',
  purge: ['./public/*.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Die Zeile, auf die du dich konzentrieren musst, ist der Teil, in dem wir hinzugefügt haben:

mode: 'jit'

Damit können wir die Funktionen des JIT-Compilers nutzen.

Wenn das erledigt ist, kannst du den Build-Befehl ausführen und sehen, wie die Dateigröße abnimmt. Die einzigen Stile, die du siehst, sind die, die du gerade verwendest.

Mit der verringerten Dateigröße ist dein Stylesheet während der Entwicklung und Produktion identisch. Die Möglichkeit, dass die Entwicklertools ins Stocken geraten, wird ebenfalls auf ein Minimum reduziert und dein Code wird schneller kompiliert, wenn du deine Projekte erstellst.

Als Nächstes werden wir uns einige praktische Anwendungen des JIT-Compilers ansehen.

(cta)

So können wir die Funktionen des JIT-Compilers nutzen.

Wenn das erledigt ist, kannst du den Build-Befehl ausführen und sehen, wie die Dateigröße abnimmt. Die einzigen Stile, die du siehst, sind die, die du gerade verwendest.

Mit der verringerten Dateigröße ist dein Stylesheet während der Entwicklung und Produktion identisch. Die Möglichkeit, dass die Entwicklertools ins Stocken geraten, wird ebenfalls auf ein Minimum reduziert und dein Code wird schneller kompiliert, wenn du deine Projekte erstellst.

Als Nächstes werden wir uns einige praktische Anwendungen des JIT-Compilers ansehen.

Wie man den Tailwind CSS JIT-Compiler verwendet

In diesem Abschnitt sehen wir uns einige praktische Beispiele für den JIT-Compiler an. Wir beginnen mit willkürlichen Werten, die uns helfen, Tailwinds Entwurfssystem zu erweitern.

Beliebige Werte

Es gibt Fälle, in denen wir lieber Werte außerhalb des bereits erstellten Entwurfssystems verwenden möchten. Diese Werte können für unsere Farben, Auffüllungen, Ränder, Breiten und so weiter gelten.

Der JIT-Compiler ermöglicht es uns, dies durch die Verwendung beliebiger Werte zu erreichen. Mit diesen Werten können wir aus dem Designsystem ausbrechen und unsere eigenen Werte definieren, die du in dieser Syntax siehst: [300px], [#FA8072].

Dazu müssen wir den Wert in eckige Klammern setzen, damit Tailwind weiß, dass wir neue Werte in unserem Entwurfssystem definieren. Hier ist ein Beispiel:

<div class="mt-[300px] w-[500px]">
</div>

Im obigen Beispiel haben wir zwei neue Werte – 300px und 500px – verwendet, die im Entwurfssystem ursprünglich nicht vorhanden waren. Vor dem JIT-Compiler musstest du diese Werte wahrscheinlich erst in der Datei config.js definieren, um denselben Effekt zu erzielen.

Das nächste Beispiel zeigt, wie du neue Farbwerte definieren kannst:

<p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

Hier haben wir einen Absatz mit einer lachsfarbenen Hintergrundfarbe erstellt. Du würdest keine Hilfsklasse in Tailwind sehen, die bg-salmon sagt, aber wir können dies mit einem beliebigen Wert definieren.

Stapelbare Varianten

Mit dem JIT-Compiler sind alle Varianten standardmäßig aktiviert, so dass du die config.js-Datei nicht mehr verwenden musst, um sie zu aktivieren. Außerdem können Varianten gestapelt werden, um fantastische Ergebnisse zu erzielen.

Jede Variante wird durch einen Doppelpunkt getrennt.

Hier ist ein Beispiel:

<button class="sm:dark:disabled:focus:hover:bg-blue-300">

Der obige Code erstellt eine Schaltfläche mit deaktivierter Fokuseigenschaft, die blau wird, wenn man mit dem Mauszeiger darauf zeigt.

Pseudo-Elemente

Der JIT-Compiler ermöglicht es uns, Pseudo-Elemente zu gestalten. Pseudo-Elemente werden verwendet, um bestimmte Teile eines Elements zu gestalten, z. B. den ersten Buchstaben eines Elements oder das Einfügen von Inhalten vor/nach einem Element.

Hier sind ein paar Beispiele:

<p class="first-letter:bg-green-600">
First letter will have a green color
</p>

Im obigen Beispiel hat der erste Buchstabe „M“ eine grüne Farbe.

<p class="selection:bg-green-600">
Highlight this text to see a green color.
</p>

Wenn du den Text aus dem obigen Code markierst, hat er eine grüne Hintergrundfarbe.

Farben für die Seitenränder

Aus Gründen der Dateigröße wurde diese Funktion zunächst weggelassen, aber das hat sich mit der Veröffentlichung des JIT-Compilers geändert. Wir können jedem Rand eine andere Farbe geben.

Sehen wir uns ein Beispiel dafür an:

<div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400">
</div>

Wir haben unserem Div mehrere Randfarben gegeben – der obere Rand ist rot, der rechte Rand ist blau, der untere Rand ist gelb und der linke Rand ist grün.

JIT-Modus in Tailwind CSS Version 3

Ab Tailwind CSS Version 3 ist der JIT-Compiler bei der Installation von Tailwind CSS standardmäßig aktiviert, so dass wir uns keine Sorgen machen müssen, etwas in der Datei tailwind.config.js zu ändern. So können wir auch unterwegs auf alle Funktionen des JIT-Compilers zugreifen. Alles, was wir tun müssen, ist, den Installationsanweisungen für die aktuelle Version zu folgen, und schon sind wir startklar.

Zusammenfassung

Der JIT-Compiler hat das Tailwind-CSS-Framework auf eine ganz neue Ebene gehoben. Seine Veröffentlichung brachte neue hilfreiche Funktionen mit sich, die uns die Nutzung des Frameworks erleichtern. Wir müssen uns keine Sorgen mehr machen, dass unsere Dateien so groß sind, dass unsere Entwicklungswerkzeuge ins Stocken geraten, denn es werden nur noch die Stile generiert, die wir auch wirklich brauchen – und zwar on the go.

Wir haben uns einige Beispiele für die neuen Funktionen angesehen, wie das Stapeln von Varianten, die Gestaltung von Elementen mit Pseudo-Elementen, die Verwendung beliebiger Werte zur Erweiterung unseres Gestaltungssystems und die sehr gefragte Funktion, jede Seite des Randes eines Elements einzeln zu gestalten. Wir haben hier noch lange nicht die Grenzen der JIT-Funktionen von Tailwind erreicht. Die nächsten Schritte bestehen also darin, selbst zu testen und herauszufinden, wie du die Funktionen von JIT am besten für deine eigene Arbeit nutzen kannst.

Welche coolen Sachen hast du mit dem JIT-Compiler gebaut? Schreib uns deine Gedanken in die Kommentare.

Ihechikara Abba

Ihechikara ist Softwareentwickler und technischer Redakteur. Er schreibt gerne Artikel über Webtechnologien, Programmierung und IT-bezogene Themen. Verbinde dich mit Ihechikara auf X.