tailwindcss

Ich bin zwar Full-Stack-Entwickler, allerdings gefällt mir die Backend-Entwicklung wesentlich besser. Nichts desto trotz kenne ich mich in CSS relativ gut aus. Bei neuen Projekten macht es mir am Anfang meist sogar noch Spaß. Früher oder später kommt dann aber immer der Moment, an dem ich mich vor lauter CSS-Klassen und vor allem Hilfsklassen nicht mehr auskenne.

Vor Kurzem habe ich auf State of CSS gelesen, dass tailwindcss vor allem in 2020 massiv an Popularität gewonnen hat. Als ich mir eine HTML-Seite mit tailwindcss angeschaut habe, war ich etwas schockiert.

Da kann man ja gleich alles in das Style-Attribut schreiben … falsch gedacht. Bei der Erstellung des Codigo-Themes wollte ich dem Ganzen eine Chance geben und siehe da, ich find’s toll.

Der grundsätzliche Ansatz ist ganz anders, als man es gewohnt ist. Anstatt fertige Klassen zu verwenden, die ein Element stylen, wird hier nur mit sogenannten Utility-Klassen gearbeitet. Diese sind Mobile-First und können dann für höhere Auflösungen entsprechend überschrieben werden.

tailwindcss unterstützt auch das Erstellen eigener Klassen, die von bestehenden Klassen erben (@apply). Dies ist vor allem dann sinnvoll, wenn ich z. B. einen Button immer gleich stylen will, aber nicht auf jeden Button immer wieder dieselben Klassen setzen will (eben so, wie man es bis gewohnt ist).

Das Ergebnis ist eine wesentliche kleinere HTML-Datei, da ich mir bestimmte Strukturen sparen konnte, und auch meine eigene CSS-Datei ist wesentlich kleiner und übersichtlicher.

Einen kleinen Wermutstropfen gibt es allerdings. Während der Entwicklung wird einfachheitshalber die vollumfängliche tailwindcss-Datei verwendet, die ca. 3,5 MB hat. Dies macht das Laden der Seiten tw. doch etwas träge. Für die Produktivversion werden dann allerdings nur die Klassen herausextrahiert, die tatsächlich benötigt werden. Bei Codigo hat die Datei unkomprimiert dann 12 KB, komprimiert 4 KB.

Für neue Projekte werde ich definitiv wieder auf dieses Framework zurückgreifen.

[Edit 31.01.2022]

Mit Tailwind v2.1 wurde ein Just-in-Time-Mode eingeführt, der den kleinen Wermutstropfen beseitigt. Seit (wenn ich mich nicht irre) v3 ist dieser Modus der Standard. Das Thema Tailwind polarisiert nach wie vor. Ich bin aber definitiv ein Fan.