Kompilierungsprozess in Tailwind CSS

Tailwind CSS bringt den großen Vorteil mit sich, dass die kompilierte Ausgabe-Datei nur eine geringe Datenmenge aufweist. Dies ist durch den Just-In-Time (JIT-Compiler) möglich. In welchen Fällen das von Vorteil ist und wann nicht, soll im Folgenden erläutert werden. Außerdem, gibt es Tailwind-CSS-Live-Hacks, was man tun kann, wenn die Kompilierung mal nicht funktioniert.

Hinweis: Verwendete Tailwind-Version: 3.4.3

Was versteht man unter CSS Kompilierung (compiling)?

Es gibt verschieden Varianten, wie man CSS schreiben kann wie SCSS, PostCSS oder auch Tailwind CSS. Diese werden vom Browser nicht automatisch verstanden, weshalb sie umgewandelt (kompiliert) werden zu einem Syntax, den der Browser versteht.

Wie kompiliert man Tailwind-CSS-Dateien?

Nachdem Tailwind CSS über npm installiert wurde, reicht folgender Befehl aus:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Durch den watch-Befehl findet der Kompilierungsprozess durchgehend automatisch im Hintergrund statt, sodass nicht ständig händisch kompiliert werden muss.

Es gibt mehrere Möglichkeiten Tailwind CSS zu kompilieren. Dies hängt von der genutzten Entwicklungsumgebung ab.

Eine detaillierte Installationsanleitung findet man in der Tailwind-CSS-Dokumentation.

Wie Tailwind CSS kleine Ausgabedateien erstellt.

In der kompilierten CSS-Datei findet man ausschließlich Klassen, die auch verwendet werden.

Beispiel HTML mit Tailwind CSS Klassen

<p class="text-sm">text-sm</p>

Ausgabedatei nach der Kompilierung


.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

Entfernt man die Klasse aus dem HTML, wird bei der Kompilierung die CSS Anweisung auch aus der Ausgabe-Datei wieder entfernt. Vorausgesetzt die Klasse wird an keiner anderen Stelle verwendet.

Folgende Anweisungen sind jedoch problematisch.

Selbst geschriebene CSS-Anweisungen

Manchmal benötigt man eine CSS-Anweisung, die mit Tailwind CSS nicht möglich ist, wie zum Beispiel bestimmte Varianten eines Verlaufes. Selbst geschriebene CSS-Anweisungen sind mit Tailwind CSS problemlos kombinierbar, doch muss man darauf achten, selbst erstellte Klassen wieder zu entfernen, wenn diese nicht mehr genutzt werden.

Beispielhafte CSS-Anweisung


.ueberfluessiger-style {
    color: red;
}

Dieser Style wurde in einer eigenen CSS-Datei erstellt und später doch nicht benötigt. Im HTML wird die Klasse nirgends gesetzt, in der Ausgabedatei bleibt sie jedoch erhalten.

Ausgabedatei


.ueberfluessiger-style {
    color: red;
}

@apply directive

mit @apply kann man in der CSS Datei Anweisungen vornehmen, die Tailwind-Klassen enthalten. Dies wird gerne vorgenommen, wenn man alle HTML-tags einer Art auf einmal ansprechen möchte. In der folgenden Anweisung wird beispielsweise jedem h6-tag ein Abstand nach unten verliehen.


h6 {
    @apply mb-7;
}

Die Alternative dazu wäre jedem h6-tag den Abstand mitzugeben, was sehr unpraktisch sein kann.


<h6 class="mb-7"></h6>

Die Kompilierte Datei enthält die Anweisung für die h6 auch dann, wenn es auf der gesamten Seite keine h6 gibt. Deshalb müssen auch derartige Anweisungen händisch entfernt werden, sollte man diese Anweisung nicht mehr benötigt.

Tailwind CSS Kompilierung funktioniert nicht. Mögliche Ursachen:

"Warum funktioniert die Kompilierung in Tailwind CSS nicht", ist eine Frage, die hin und wieder aufkommt und mehrere Ursachen haben kann.

Browsercache geleert?

Möglicherweise war die Kompilierung gar nicht fehlerhaft, sondern wird die Änderung nur nicht angezeigt. Untersucht man mit den Entwicklungswerkzeugen (Devtools) des Browsers den Code und findet die entsprechende Klasse im HTML nicht, liegt vermutlich ein Problem mit dem Caching vor. Ist die Klasse gesetzt, fehlt jedoch die passende CSS-Anweisung ist die Wahrscheinlichkeit für den Fehler bei einer Kompilierung hoch.

Einfacher ist es, den Browser mit "Strg / CMD + F5" oder "Strg / CMD + Shift +R" zu aktualisieren. Dies aktualisiert den Browser und leert gleichzeitig den Cache.

Bei der Web-Entwicklung lohnt es sich ohnehin das Caching im Browser dauerhaft zu deaktivieren, somit ist dieser Fehler schon einmal ausgeschlossen.

Entwickelt man mit einem CMS kann es jedoch zu einem zusätzlichen Caching-Problem kommen. In TYPO3 loggt man sich hierfür ins Backend ein und leert den Cache.

Error übersehen?

Der Kompilierungsprozess wird abgebrochen, sobald es bei der Kompilierung ein Problem gibt. Wundert man sich, warum die gerade neu und korrekt gesetzte Tailwind CSS Klasse nicht funktioniert, könnte ein Fehler an andere Stelle dies verursacht haben. Ein einfacher Syntax-Fehler wie eine versehentlich gelöschte Klammer kann dies bereits auslösen.


    h6
    @apply mb-7;
}

Die obige, fehlerhafte Anweisung, würde beispielsweise folgenden Error verursachen:


CssSyntaxError: postcss-import: /home/username/tailwind/src/css/_main.css:22:1: Unknown word

Wird der "watch" Befehl noch ausgeführt?

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Möglicherweise wird dieser Befehl gar nicht mehr ausgeführt, da er durch einen Error abgebrochen wurde. Oder man hat nach einem Neustart vergessen, diesen wieder zu aktivieren. In der Kommandozeile kann es häufig schwer erkennbar sein, ob der Kompilierungsprozess gerade läuft oder nicht, weshalb man bei Unsicherheit einfach direkt den Befehl erneut ausführen sollte. Sollte der Befehl bereits laufen, stört es den Prozess ohnehin nicht.

Pfad falsch gesetzt?

Entsprechen die Pfade der Kompilierung, der im HTML-eingetragenen Pfade?


"npx tailwindcss -i ./src/input.css -o ./output.css --watch"

Dies stimmt mit folgender Einbindung nicht überein, da in der obigen Anweisung "dist" fehlt.


<link href="../dist/output.css" rel="stylesheet" /<

Ist Tailwind CSS korrekt installiert?

Möglicherweise gab es bereits bei der Installation Fehler. Am besten man startet eine neue Installation und achtet, darauf, ob es eine Fehlermeldung gibt.


npm install tailwindcss

Sollte das nicht ausreichen, kann es hilfreich sein den "node_modules"-Ordner zu löschen und eine komplette Neuinstallation über npm auszuführen.


npm install

Fehler in der Konfiguration von PostCSS?

Auch ein Fehler in der postcss.config.js kann den Kompilierungsprozess stören.

Falscher Eintrag bei der Tailwind-CSS-Richtline (Tailwind directives)

In der Installationsanleitung der Tailwind-CSS-Doku wird davon ausgegangen, dass PostCSS verwendet wird. Da dies aber nicht erwähnt wird, kann das für Verwirrung sorgen. Verwendet man Tailwind CSS in einem Projekt ohne PostCSS ist eine andere Anweisungen für die Tailwind directives notwendig.

PostCSS


@tailwind base;
@tailwind components;
@tailwind utilities;

natives CSS


@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Über JavaScript hinzugefügte Tailwind-CSS-Klassen, werden nicht dargestellt.

Hin und wieder kommt es vor, dass man Anpassungen im CSS beispielsweise nach Klick auf ein Element vornehmen möchte. Hierfür kann es naheliegend sein dafür über JavaScript die entsprechende Tailwind-Klasse ins HTML einzufügen. Das funktioniert manchmal hervorragend, in anderen Fällen überhaupt nicht.

Hier kann die Ursache ebenfalls im Kompilierungsprozess liegen. Durch den Just-In-Time-Compiler (JIT-Compiler) hat die durch Tailwind CSS generierte CSS-Ausgabedatei eine geringe Datenmenge, denn es werden nur Klassen in diese Datei eingetragen, die auch verwendet werden. Diese notwendigen Klassen werden ermittelt, indem die in der HTML-verwendete Tailwind-CSS-Klassen durchsucht werden. Eine über JavaScript nachträglich hinzugefügte Klasse ist nicht Teil dieses Prozesses. Warum funktionieren diese Klasse häufig trotzdem? Wurde die über JavaScript hinzugefügte Klasse bereits zufällig an einer anderen Stelle verwendet, wird die CSS Eigenschaft trotzdem erkannt und dargestellt.

Nun könnte die Idee entstehen, auf der Seite ein nicht sichtbares Element anzulegen, das alle Klassen enthält, die nachträglich über JavaScript hinzugefügt werden und bisher an keiner anderen Stelle vorkommen. Technisch funktioniert das, doch gibt es eine elegantere Lösung.

Tailwind CSS safelist

In der tailwind.config.cjs kann eine safelist eingetragen werden.


module.exports = {
    safelist: ["p-28", "p-48"],
};

Durch diese Anweisung können die Tailwind-CSS-Klassen "p-28", "p-48" verwendet werden, obwohl sie bei der Kompilierung noch nicht in der HTML-Struktur vorgekommen sind.