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
.flex {
display: flex;
｝
.pt-4 {
padding-top: 1rem;
｝
.rotate-90 {
transform: rotate(90deg);
｝.custom-coffee-style {
display: flex; padding-top: 1rem;
transform: rotate(90deg);
｝<div class="custom-coffee-style">...</div>
<div class="flex pt-4 rotate-90">...</div><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.
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!
