Tailwind CSS vorgestellt

Der StateofCSS ist das Ergebnis einer Umfrage unter Entwicklern, was für Tools sie verwenden und wenn man dabei CSS Framework schaut, dann ist TailwindCSS ganz oben beim Punkt Satisfaction, d.h. Zufriedenheit und da geht es darum, wenn Sie dieses Tool verwendet haben, würden Sie es wieder verwenden, d.h. Sie sind mit dem Tool zufrieden und da ist TailwindCSS an erster Stelle, was natürlich eine super Position ist. Woher kommt das und was ist TailwindCSS eigentlich? Das ist die Webseite von Tailwind und da sehen Sie auch ein kleines Beispiel, wie man mit Tailwind arbeitet. Ich lade die Seite einmal neu, damit dann die Animation noch einmal abläuft. D.h. Sie schreiben innerhalb Ihres HTML-Codes bestimmte Klassen und bestimmen damit die Formatierung des Elements und Sie können damit das Element ganz frei formatieren, d.h. Sie haben nicht einfach eine fertige Komponente mit ein paar Variationen, wo Sie sich entscheiden können, soll das links oder rechts sein, sondern Sie können wirklich ganz frei gestalten und ganz frei bestimmen, wie das Ganze aussehen soll und für die Formatierungen müssen Sie nicht Ihren HTML-Code verlassen, sondern Sie bleiben wirklich immer in diesen Code, d.h. Sie müssen nicht auf CSS wechseln. Ein mögliches Missverständnis muss man an dieser Stelle ausräumen. Es gibt einen ganz klaren Unterschied zwischen diesen Tailwind-Klassen und normalen style-Attributen, wo man CSS-Code angibt, also wenn Sie so sehen, einen Button mit bestimmten Klassen, dann kann man auf den ersten Blick ja denken, dass es ja so ähnlich, wie wenn ich jetzt hier Style verwende, aber es gibt zwei wesentliche Unterschiede und die sind folgende: Sie können innerhalb von Style nicht bestimmte Zustände wie Hover oder Focus formatieren, sie können das Ganze auch nicht responsiv machen. Bei den Klassen innerhalb von Tailwind, ist das hingegen problemlos möglich und das ist ein großer Unterschied zwischen diesen style-Attributen und den Klassen bei Tailwind. Also hier sehen Sie, Hover habe ich angegeben, Focus oder ich kann auch sowas machen wie Small, also erst ab dem Breakpoint Small, das sind alles Sachen, die bei Tailwind vorgegeben sind und das würde eben bei diesen Inline-Styles nicht funktionieren. Schauen wir uns noch mal an, was für Features Tailwind hat. Also es ist erst einmal ein Utility-Framework, d.h. Sie formatieren, ohne den HTML-Code zu verlassen, das ist etwas, dass müssen Sie einfach mal ausprobieren. Viele Leute sagen, dass Sie dadurch sehr produktiv arbeiten können. TailwindCSS ist gut für individuelle Designs, d.h. Sie haben nicht einfach eine vordefinierte Komponente, sondern Sie können wirklich ganz genau bestimmen, was Sie haben möchten, es gibt aber in der Dokumentation ein paar Beispiele, also es gibt auch paar Komponenten, an denen Sie sich orientieren können. TailwindCSS zeichnet sich durch ein Constrain-based design approach aus, d.h. Sie können individuell alles gestalten, aber Sie haben beispielsweise nicht unendlich viele Abstände zur Verfügung, sondern dieses sind in verschiedenen Stufen aufgeteilt. Falls das nicht passt, können Sie das aber auch anpassen, aber ich finde immer, dass das TailwindCSS-Team da ein gutes Feeling hat, welche Abstände sinnvoll sind. Außerdem gibt es viele gelungene Erweiterungen, z.B. gibt es Klassen wie Space, wodurch Sie Abstände zwischen Kind-Elementen definieren können, was sonst in CSS nicht möglich ist. TailwindCSS ist natürlich responsiv, anders würde es gar nicht gehen und Sie können bei den verschiedenen Breakpoints wirklich ganz verschiedene Formatierungen festlegen. Außerdem bietet TailwindCSS mehr, als nur ein klassisches Utility-Framework bietet, es bietet nämlich auch Techniken für die Wiederverwendung von Formatierungen. Also das Tailwind-Team hat sich auch überlegt, was macht man, damit man nicht Klassen immer wieder schreibt. Das widerspricht ja dem Prinzip, dass man sich nicht wiederholen sollte. Wunderbar an Tailwind ist auch, dass es sehr konfigurierbar ist, bis in die Details. Sie können Tailwind durch Plug-ins erweitern und außerdem ist die CSS-Datei in der Produktion dann klein. Meine Empfehlung: Testen Sie TailwindCSS einmal aus. Auf den ersten Blick ist es vielleicht ein bisschen ungewohnt, aber vielleicht geht es Ihnen dann auch so, wenn Sie es ausprobieren, wie vielen anderen, die einfach diese Arbeit mit TailwindCSS sehr angenehm und sehr produktiv empfinden.