Schreibst du viel CSS Code? Dann lies unbedingt weiter.

Falls du das nicht durchlesen willst, hier der Hauptgrund warum du TailwindCSS eine Chance geben solltest: Du erreichst genau das Gleiche Resultat wie mit deinem handeschriebenen CSS, je nach Projektgrösse aber in 1/1000 der Zeit.

Du sparst Lebenszeit, ohne Qualitätseinbussen. Wenn du dich fragst, ob es sich wirklich lohnt vier Stunden custom CSS zu schreiben anstatt 15min CSS Klassen einzutippen, dann nutze deinen Workflow weiter. Wenn du deinen Workflow optimieren willst, schau dir TailwindCSS mal an.

Eins vorweg – ich habe mich auch sehr lange gewehrt und meine Vorurteile gehabt. Habe TailwindCSS abgelehnt und für mich gedacht, das Teil sei schrott.

Schauen wir uns die Argumente mal an.

1. Keine Saubere Trennung zwischen HTML, CSS und JavaScript!

Mit HTML gebe ich die Inhalte der Website an und mit CSS style ich dann alles. Beides ist sauber voneinander getrennt und so bleibt das übersichtlich. CSS gehört in ein separates File, welches ich im HEAD der Website einbinde. So habe ich es vor 15 Jahren gelernt und so tue ich es immer noch. Weil das ist ja Best Practice!

Meine heutige Meinung dazu

Vor 15 Jahren waren die Uis und Webprojekte ja auch nicht so unglaublich komplex wie heute. Mit React, Angular, Vue etc. kannst du heute die komplexesten Uis, Apps und Webprojekte entwickeln. Das gab es damals noch gar nicht. Die saubere Trennung funktioniert heute nicht mehr, weil es nicht mehr skalierbar und effizient ist.

Heute hast du ein Dashboard auf welchem du verschiedene dynamisch veränderte Komponenten einbindest. Da macht es viel mehr Sinn, wenn du auf dem Level der Komponenten deine Styles angibst.

Und da glänzt TailwindCSS einfach über alle Berge.

Beispiel Grid mit Feature Cards

Es spart so viel Zeit. Ein Beispiel: Ein Kunde sagt mir, ob ich ihm so ein Feature Grid mit verschiedenen Boxen mit Icons, Batches, Bildern, Texten und Buttons programmieren kann. Klar, kann ich machen.

Nutze ich den klassischen Weg mittels custom CSS (auch mit BEM und SASS Nesting und allem drum und dran), braucht das wohl 30-40min mit testen. Dabei muss ich mir überlegen, wie ich die Klassen bennen soll und wie ich das ganze skalierbar machen kann. Es bruacht also zusätzlichen geistigen Aufwand.

Mache ich das mit TailwindCSS, dann gebe ich die HTML Struktur vor, füge die Klassen ein und habe top gestylte Komponenten wo auch die Abstände einfach passen. Dauert vielleicht 10min.

Mache ich alle Projekte so?

Nein, noch nicht. Je nach Tools hast du begrenzte Möglichkeiten, CSS Klassen hinzuzufügen oder es werden dir von der Engine schon recht viele Vorgaben gemacht. Da kannst du höchstens mit JavaScript mittels DOM Manipulation Klassen hinzufügen oder wegnehmen. Das ist aber nicht wirklich skalierbar.

Momentan wende ich eine Mischung aus Utility Klassen sowie Custom CSS an.

WIP …