Meistern Sie Tailwind CSS mit seinem Just-in-Time (JIT)-Modus

Veröffentlicht: 2022-04-23

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

Bei der Verwendung von Tailwind CSS gab es einige Herausforderungen, wie unter anderem ein riesiges Stylesheet während der Entwicklung und die Notwendigkeit, zusätzliche Varianten selbst zu aktivieren. Eine Lösung für einige dieser Herausforderungen wird unser allgemeiner Schwerpunkt in diesem Tutorial sein.

In diesem Tutorial sprechen wir über eine sehr wichtige Funktion des CSS-Frameworks Tailwind, bekannt als Just-in-Time-Compiler, besser bekannt als JIT-Compiler.

Wir werden die Funktionen und Vorteile der Verwendung des Tailwind CSS JIT-Compilers hervorheben, wie man ihn aktiviert, und einige praktische Beispiele sehen.

Lass uns anfangen.


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

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

Tailwind CSS ist ein Utility-First-CSS-Framework mit einer Reihe vordefinierter CSS-Klassen, die direkt in unserem Markup angewendet werden können, um das Design von Webseiten zu beschleunigen und die Konsistenz im Design mithilfe vordefinierter Systeme aufrechtzuerhalten.

Vor der Veröffentlichung des JIT-Compilers beträgt die Größe unserer generierten Tailwind-CSS-Datei nach der Installation normalerweise bis zu 3 MB. Während Sie Tailwind weiter konfigurieren und anpassen, wird die Dateigröße jedoch immer größer – in einigen Fällen können Sie am Ende ein Stylesheet mit einer Größe von bis zu 15 MB erhalten.

Obwohl alle unsere nicht verwendeten Stile während der Produktion gelöscht werden, ist dies während der Entwicklung nicht der Fall. Bei einem Stylesheet mit einer Größe von 10 MB oder sogar 20 MB werden wir zwangsläufig auf Probleme stoßen und unsere Entwicklungstools verzögern.

Mit dem JIT-Compiler werden Stile generiert, während wir unsere Projekte erstellen. Das bedeutet, dass nur die Utility-Klassen, die Sie gerade verwenden, in die Größe Ihres Stylesheets aufgenommen werden, nicht alle Utility-Klassen, die mit Tailwind CSS geliefert werden.

Vorteile der Verwendung des CSS-JIT-Modus von Tailwind

In diesem Abschnitt werden einige der Vorteile der Verwendung des JIT-Compilers erläutert. Sie beinhalten:

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

Nachteile der Verwendung des Tailwind CSS JIT Compilers

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

  • Erweiterte PurgeCSS-Optionen werden nicht unterstützt.
  • „Sie können nur Klassen @apply , die Teil des Kerns sind, von Plugins generiert oder in einer @layer Regel definiert werden. Sie können keine beliebigen CSS-Klassen @apply , die nicht in einer @layer Regel definiert sind.“
  • Es wird nur PostCSS 8 unterstützt.

Die Direktive @apply wird verwendet, um Hilfsklassen in unserem benutzerdefinierten CSS anzuwenden. Dies ist nützlich, wenn wir benutzerdefinierte CSS-Stile definieren, aber lieber einige bereits definierte Hilfsklassen verwenden möchten. Hier ist ein Beispiel dafür, wie die @apply 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 mithilfe einer Tailwind-Dienstprogrammklasse aufgetragen.

Erfahren Sie in diesem hilfreichen Leitfaden mehr über ein sehr wichtiges Feature des CSS-Frameworks Tailwind, das als Just-in-Time-Compiler bekannt ist. Zum Twittern klicken

So aktivieren Sie den CSS-JIT-Modus von Tailwind

Beachten Sie, dass Tailwind CSS Version 3 zum Zeitpunkt des Schreibens bereits veröffentlicht wurde und standardmäßig aktiviert ist, wenn Sie Tailwind CSS installieren. Die nachfolgenden Erläuterungen zur Freischaltung des JIT-Compilers gelten nicht ab Version 3. Alle anderen in diesem Tutorial behandelten Beispiele sind mit Version 3 kompatibel.

Es ist ziemlich einfach, den JIT-Compiler zu aktivieren. Sie müssen lediglich Ihre tailwind.config.js-Datei aktualisieren, indem Sie die mode-Eigenschaft hinzufügen, die den Wert „jit“ haben sollte.

So sollte Ihre 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 wir uns konzentrieren müssen, ist der Teil, in dem wir Folgendes hinzugefügt haben:

 Modus: 'jit'

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

Danach können Sie den Build-Befehl ausführen und sehen, wie sich Ihre Dateigröße verringert. Die einzigen Stile, die Sie sehen, sind diejenigen, die Sie verwenden.

Durch die reduzierte Dateigröße ist Ihr Stylesheet während der Entwicklung und Produktion gleich. Die Möglichkeit, dass die Entwicklertools verzögert werden, wird ebenfalls auf ein Minimum reduziert und Ihr Code wird schneller kompiliert, während Sie Ihre Projekte erstellen.

Als Nächstes sehen wir uns einige praktische Anwendungen des JIT-Compilers an.

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

Danach können Sie den Build-Befehl ausführen und sehen, wie sich Ihre Dateigröße verringert. Die einzigen Stile, die Sie sehen, sind diejenigen, die Sie verwenden.

Durch die reduzierte Dateigröße ist Ihr Stylesheet während der Entwicklung und Produktion gleich. Die Möglichkeit, dass die Entwicklertools verzögert werden, wird ebenfalls auf ein Minimum reduziert und Ihr Code wird schneller kompiliert, während Sie Ihre Projekte erstellen.

Als Nächstes sehen wir uns einige praktische Anwendungen des JIT-Compilers an.

So verwenden Sie den CSS-JIT-Compiler von Tailwind

Wir werden in diesem Abschnitt einige praktische Beispiele des JIT-Compilers sehen. Wir beginnen mit willkürlichen Werten, die uns helfen, das Designsystem von Tailwind zu erweitern.

Beliebige Werte

Es können Fälle auftreten, in denen wir lieber Werte außerhalb des bereits erstellten Designsystems verwenden möchten. Diese Werte können für unsere Farben, Polsterung, Rand, Breite usw. gelten.

Der JIT-Compiler ermöglicht es uns, dies durch die Verwendung beliebiger Werte zu erreichen. Diese willkürlichen Werte ermöglichen es uns, aus dem Designsystem auszubrechen und unsere eigenen benutzerdefinierten Werte zu definieren. Sie würden diese Werte in dieser Syntax sehen: [300px], [#FA8072].

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

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

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

Das nächste Beispiel zeigt, wie Sie neue Farbwerte definieren können als:

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

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

Kämpfen Sie mit Ausfallzeiten und WordPress-Problemen? Kinsta ist die Hosting-Lösung, die entwickelt wurde, um dir Zeit zu sparen! Schauen Sie sich unsere Funktionen an

Stapelbare Varianten

Beim JIT-Compiler sind alle Varianten standardmäßig aktiviert, sodass Sie die Verwendung der Datei config.js zum Aktivieren vergessen können. Darüber hinaus können Varianten gestapelt werden, um tolle 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 und wird blau, wenn der Mauszeiger darauf bewegt wird.

Pseudo-Elemente

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

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 Sie den Text aus dem obigen Code hervorheben, hat er eine grüne Hintergrundfarbe.

Randfarben pro Seite

Aufgrund von Überlegungen zur Dateigröße wurde diese Funktion anfangs weggelassen, aber das änderte sich mit der Veröffentlichung des JIT-Compilers. Wir können jedem Rahmen eine andere Farbe geben.

Sehen wir uns dazu ein Beispiel 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 und höher ist der JIT-Compiler standardmäßig aktiviert, wenn wir Tailwind CSS installieren, sodass wir uns keine Gedanken über Änderungen in der tailwind.config.js -Datei machen müssen. Damit können wir auch unterwegs auf alle Features des JIT-Compilers zugreifen. Alles, was wir tun müssen, ist den Installationsanweisungen für die aktuelle Version zu folgen, und schon kann es losgehen.

Was ist der JIT-Compiler... und wie kann er Ihre Website verbessern? Dieser Leitfaden hat die Antwort Click to Tweet

Zusammenfassung

Der JIT-Compiler hat das Tailwind-CSS-Framework auf eine ganz neue Ebene gebracht. Seine Veröffentlichung kam mit neuen hilfreichen Funktionen, um unsere Nutzung des Frameworks zu verbessern. Wir müssen uns keine Sorgen mehr darüber machen, dass unsere Dateigröße so groß ist, dass unsere Entwicklungstools verzögert werden, da nur die Stile generiert werden, die wir tatsächlich verwenden, und das alles unterwegs.

Wir haben einige Beispiele für die neuen Funktionen gesehen, wie das Stapeln von Varianten, das Gestalten von Elementen mit Pseudoelementen, die Verwendung beliebiger Werte zur Erweiterung unseres Designsystems und die sehr gefragte Funktion – die Möglichkeit, jede Seite der Umrandung eines Elements individuell zu gestalten. Wir haben hier noch lange nicht die Grenzen der JIT-Funktionen von Tailwind erreicht, daher werden Ihre nächsten Schritte darin bestehen, selbst zu testen und zu erkunden, wie Sie die Funktionen von JIT am besten für Ihre eigene Arbeit nutzen können.

Welche coolen Sachen haben Sie mit dem JIT-Compiler gebaut? Teilen Sie Ihre Gedanken in den Kommentaren unten mit.