Ein Leben ohne custom CSS ist möglich – dank Tailwind

Problem

Eine Webseite oder Browser-App muss gebaut werden. Das Design-Team hat sich bereits überlegt, wie das Ganze aussehen soll. Es soll nicht nach Material Design, Bootstrap, Foundation und co. aussehen. Oha, custom Design – das heißt viel custom CSS Code. Oder?

Lösung

Nicht ganz – die Antwort von Tailwind heißt "utility-first". Das beschreibt das Prinzip, anstatt selbst geschriebener CSS-Klassen vordefinierte "utility" Klassen an die HTML-Elemente zu schreiben. Vorher: Ich schreibe eine oder mehrere eigene CSS-Klassen an das Element, gehe in die zugehörige CSS-Datei und definiere die gewünschten Regeln & Properties händisch. Nachher: Ich nutze generierte Klassen wie flex, pt-4, mx-auto, text-center oder rotate-90 und schreibe sie direkt in mein HTML – ohne eigenes CSS zu schreiben. Wie geht das?

Beispiel

Beim "Bauen" der App durchsucht Tailwind ein konfiguriertes Set an Dateien nach vordefinierten CSS-Klassen wie z.B. flex oder pt-4. Source-Dateien können prinzipiell beliebig sein - HTML, JS/TS und JSX/TSX werden unterstützt. Nur Klassen, welche im Source Code genutzt werden, sind Teil des Outputs. Tailwind generiert dafür solches CSS:

.flex {
display: flex;
｝
.pt-4 {
padding-top: 1rem;
｝
.rotate-90 {
transform: rotate(90deg);
｝

Im Vergleich eine händisch definierte Klasse mit analogem Inhalt:

.custom-coffee-style {
display: flex; padding-top: 1rem;
transform: rotate(90deg);
｝

So würde die Nutzung im HTML aussehen:

<div class="custom-coffee-style">...</div>
<div class="flex pt-4 rotate-90">...</div>

Tailwind erlaubt es zudem, Klassen nur unter gewissen Bedingungen anzuwenden.

<div class="flex pt-4 rotate-90 hover:bg-orange-500
sm:pt-8 dark:text-orange-100">
• • •
</ div>

Dieser Mechanismus erlaubt es, Styles nur in speziellen Zuständen (active, hover etc.) oder nur im dark mode zu aktivieren. Out of the box bietet es Tailwind auch an, Styles nur für spezielle Breakpoints (sm, md etc.) anzuwenden, womit man beim Responsive Design unterstützt wird.

jambit ToiletPaper#176: Ein Leben ohne custom CS dank Tailwind

Weitere Aspekte

Wie wird das installiert? https://tailwindcss.com/docs/installation
Die Docs von Tailwind sind wirklich sehr gut – im Alltag ersetzen sie quasi die altbekannte CSS-Referenz von Mozilla.

---

Autor: Robert Gruner / Software Engineer / Standort Leipzig

Lust, das nächste ToiletPaper zu schreiben? Jetzt bei jambit bewerben!