Danke, Tailwind!

Als ich angefangen habe, Webseiten zu bauen, hat man Layouts noch mit Tabellen erstellt und die Designmöglichkeiten waren eingeschränkt, animierte GIFs waren das Highlight einer jeder Webseite. Wenn man wollte, dass sich ein Button beim Drüberfahren der Maus ändert, dann hat man sich dafür zwei Bilder erstellt und diese ausgetauscht. So was das damals.

Viele Jahre arbeitete ich als klassischer Web-Freelancer. Habe für Agenturen und eigene Kunden unzählige Webseiten erstellt. Und keine Sorge, ich habe dazu dann keine Tabellen mehr benutzt, dafür aber CSS.

CSS empfand ich immer als anstrengend. Vieles, was gebaut werden musste, wirkte wie ein Hack. Dinge, die auf jeder Webseite zu finden waren, mussten unverhältnismäßig kompliziert und fragil zusammengeschustert werden. Jeder kannte den .clearfix Hack, der irgendwann zum Standard wurde.

Ich habe über die Jahre meine Freude an CSS und der klassischen Frontend-Arbeit verloren. Meine Schwerpunkte haben sich verlagert und bei den großen Projekten, an denen ich mitgearbeitet habe, gab es immer jemanden, der Frontend „gemacht“ hat.

Natürlich kommt man als Full-Stack-Entwickler nicht um CSS herum und in Maßen war das auch okay. Bei den Backoffice-Lösungen, an denen ich gearbeitet habe, kam immer ein Frontend-Framework zum Einsatz und nahm mir Vieles ab.

Auch bei meinen eigenen Projekten, dieser Webseite hier zum Beispiel, habe ich in den vergangenen Jahren stets kleine Frameworks benutzt. Als es mit Bootstrap losging, hatte auch ich das im Einsatz, später mal Foundation… Aber mich störte die Uniformität, die damit einher kam.

Die genutzten Frameworks wurden immer kleiner. Zwischendurch schrieb ich dann doch wieder alles selbst und macht das schnell wieder rückgängig. Zuletzt benutze ich das UIKit, mit dem ich lange zufrieden war.

Weil die Seite ohne JavaScript mit UIKit nicht korrekt gerendert wurde, beschloss ich mich, es loszuwerden. Ich entschied mich, mal wieder etwas Neues zu lernen: Tailwindcss.

Tailwind ist super für Leute wie mich. Ich bin kein Designer und kann damit trotzdem zügig gut aussehende Komponenten bauen. Weil ich CSS kenne, sind die Klassennamen von Tailwind naheliegend und ich muss nur selten in die Dokumentation schauen.

Ich habe also angefangen meine Seite mit Tailwind zu bauen und ich war begeistert!

Bis…

Als Entwickler ist mein Anliegen, mich möglichst nie zu wiederholen. Das klappt nicht immer, aber ich versuche zumindest mich so wenig wie möglich zu wiederholen.

Tailwind hingegen zwang mich dazu.

Ich benutze auf meiner Webseite Komponenten, aus denen alles zusammengebaut ist. So konnte ich einige Wiederholungen reduzieren, aber nicht alle. Ich könnte natürlich anfangen, jedes noch so kleine Stücken in eine Komponente umzuwandeln und aus diesem Atomen dann größere Komponenten zu bauen. Aber…

Ich will nicht für jede Webseite, die ich baue, anfangen eine eigenes atomic Frontend Framework zu bauen, nur um nicht ständig CSS-Klassen wiederholen zu müssen.

Ich fing also an, eigene Klassen zu definieren und darin mittels @apply Tailwind zu nutzen. Das ging. Ne Weile. Bis es dann zu unübersichtlich und langsam und groß wurde.

Und dann kamen da diese tollen neuen Funktionen. Container-Queries zum Beispiel. Oder Grid-Layouts, die nicht ganz so geradlinig waren. Und es wurde krampfig mit Tailwind.

Und ehe ich mich versah, fing ich an, Klassen zu definieren und eigenes CSS zu schreiben. Und dann schmiss ich immer mehr Tailwind raus und schrieb den Kram doch selbst. Ich fing an, mich mit all den neuen CSS-Möglichkeiten zu befassen - und das war toll!

Was heute alles so schön einfach geht! Mit CSS! Ohne Kopfschmerzen! Tailwind hat mich dazu gebracht, meine Freude an CSS neu zu entdecken! Auf einmal saß ich da und las mich in besagte Container-Queries ein, war begeistert, dass ich nicht nur viel weniger und viel einfacheres CSS schreiben, sondern auch noch meine PHP-Snippets massiv reduzieren konnte.

Und jetzt sitze ich hier und stecke mitten drin im Umbau meiner Seite. Schmeiße nach und nach Tailwind raus und baue alles mit CSS nach/um/neu und freue mich, wie toll das funktioniert und wie schlank CSS-Code sein kann, wenn man vernünftig mit Variablen arbeitet. Dinge, die ich wegen der Frameworks in den letzten Jahren nur sporadisch genutzt hatte.

Ich werde vermutlich kein reiner Frontend-Entwickler mehr, aber ich habe meine Freude an CSS zurückgefunden. Schuld daran ist Tailwind und mein Drang dazu, möglichst sauberen Code ohne Wiederholungen zu schreiben.

Also: Danke - I guess.

Ich kann mir gut vorstellen, dass ich für schnelles Prototyping weiterhin Tailwind benutze. Für meine eigenen Projekte wird’s erstmal wieder CSS sein und ich freue mich über die neuen Möglichkeiten.