Apptiva Logo

Tailwind CSS

Tailwind CSS ist nach wie vor ein umstrittenes CSS-Framework. Ich selbst hatte jahrelang meine Vorurteile gegenüber Tailwind. Inzwischen ist Tailwind CSS aber allgegenwärtig und es gibt gute Argumente, sich damit zu beschäftigen. Hier meine Gedanken dazu.

Publiziert am von Philip Schönholzer

Tailwind CSS ist ein Open Source CSS Framework. Es unterscheidet sich von anderen CSS-Frameworks wie Bootstrap oder Foundation. Es enthält nur die Grundlagen für die Gestaltung von HTML, z. B. Ränder, Grössen, Positionierungen, Farben usw. Es enthält eine Liste von “Utility”-CSS-Klassen, die verwendet werden können, um jedes Element durch Mischen und Anpassen zu gestalten.

<!-- Beispiel einer Card mit Tailwind CSS gestyled -->
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12"src="/img/logo.svg"alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">Bubble Chat</div>
<p class="text-slate-500">Du hast eine neue Nachricht!</p>
</div>
</div>

Das Prinzip von Tailwind CSS hat mir lange Zeit nicht gefallen (siehe unten). Nachdem es in den letzten Jahren immer mehr an Popularität gewonnen hat und auch einige Argumente dafür sprechen, habe ich es bei zwei kleineren Projekten eingesetzt.

Was ich an Tailwind CSS mag

  • Sehr pragmatisch
  • Extrem schnelle Entwicklung möglich
  • Keine vorgefertigten Elemente, die angepasst oder überschrieben werden müssen
  • Keine Namen für Klassen/Komponenten ausdenken und refaktorisieren müssen
  • Sehr kleine CSS-Datei nach dem Build- Keine Laufzeit und damit keine Laufzeitverluste

Was mir immer noch nicht gefällt

  • Keine elegante Lösung (“schlechtes” HTML)
  • “logical properties” und “em”-Grössen etwas kompliziert
  • Debugging mit viele Klassen und CSS-Variablen in den Browser Dev-Tools schwieriger

Trotzdem werden ich in Zukunft - wenn möglich - Tailwind CSS in allen Projekten einsetzen.

Was sollte man beachten

  • Verwende nur die Basis von Tailwind CSS und verliere dich nicht in den mächtigeren Konzepten
  • Nutze das VS-Code Plugin für Tailwind CSS
  • Nutze das Prettier-Plugin für Tailwind CSS

https://tailwindcss.com/

Apptiva Logo
Apptiva AG
Eichweid 1
6203 Sempach Station

041 322 26 26

info@apptiva.ch

WhatsApp LogoChat auf WhatsApp

Newsletter

Quartalsweise Apptiva-News mit hilfreichen Insights in deinem Postfach.

Socials

Swiss Made SoftwareLehrbetrieb Vignette

Du hast es geschafft! Zur Belohnung gibt's unser Sahnehäubchen.

Fokusthemen

Angebot

Workshops

Apptiva

Rechtliches