Tailwind CSS ist ein CSS-Framework, das Gestaltung über viele kleine Klassen direkt im HTML festlegt. Adam Wathan hat es 2017 veröffentlicht, heute ist es eines der meistgenutzten CSS-Frameworks überhaupt.
- Tailwind CSS
Ein CSS-Framework aus Hilfsklassen, von denen jede genau eine Gestaltungseigenschaft setzt.
Beispiel: „Den Kartenrahmen haben wir mit Tailwind CSS direkt im Template gesetzt, eine eigene CSS-Datei war dafür nicht nötig.“Auch: Tailwind.
Verwandt: Utility-first CSS, das Prinzip, nach dem Tailwind gebaut ist.
Wie Tailwind CSS arbeitet
Statt einer Klasse wie karte, die in einer CSS-Datei beschrieben wird, stehen am Element die einzelnen Eigenschaften: p-6 für den Innenabstand, rounded-lg für die Ecken, shadow für den Schatten. Präfixe wie md: oder hover: gelten ab einer Bildschirmbreite oder beim Überfahren mit der Maus.
<div class="p-6 rounded-lg shadow md:flex md:gap-6">
<img class="w-24 h-24 rounded-full" src="team.jpg" alt="">
<p class="text-gray-700">Ansprechpartnerin für Webdesign</p>
</div>Beim Bauen durchsucht Tailwind die Templates und erzeugt nur das CSS für Klassen, die tatsächlich vorkommen. Die fertige Datei bleibt dadurch klein, auch wenn das Framework Tausende Klassen kennt.
Was für Tailwind CSS spricht und was dagegen
Dafür spricht das Tempo im Alltag. Wer gestaltet, bleibt im Template und muss keine Klassennamen erfinden, und eine Änderung an einem Element wirkt sich garantiert nur dort aus. Dazu kommt eine feste Skala für Abstände, Farben und Schriftgrößen, die die Gestaltung einheitlich hält.
Dagegen spricht, dass das HTML lang wird und auf den ersten Blick unübersichtlich wirkt. Wiederkehrende Bausteine fasst man deshalb in Komponenten des Templates zusammen.
Tailwind CSS in der Praxis
Die Website von Homepage Helden ist mit Tailwind CSS gestaltet, zusammen mit Alpine.js und Laravel. Die Kombination ist im PHP-Umfeld verbreitet und bei vielen Agenturen Standard geworden.