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.
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