Tailwind CSS

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 1. Es enthält eine Liste von “Utility”-CSS-Klassen, die verwendet werden können, um jedes Element durch Mischen und Anpassen zu gestalten 2.

<!-- 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/