Tailwind CSS

In diesem Blogpost geht es um Tailwind CSS. Ich habe davon im letzten TBZ Modul gehört und war neugierig, weshalb ich mich mehr informiert habe und nun auch ein Blog schreibe.

Was ist Tailwind CSS

Tailwind CSS ist ein „Utility-first“ CSS-Framework für die schnelle Erstellung von individuellen UIs, das einen umfangreichen Katalog von CSS-Klassen und -Tools zur Verfügung stellt, mit denen man problemlos mit dem Styling der Website oder Anwendung beginnen kann. Man kann es als eine coole Möglichkeit sehen, Inline-Styling zu schreiben und eine gute Oberfläche zu erreichen, ohne eine einzige Zeile eigenes CSS zu schreiben. 

Meiner Meinung nach ist das Einzige, was die meisten Entwickler an Tailwind CSS stören wird, die Tatsache, dass der Markup “voller” und auf erstem Blick komplizierter aussieht, als man es vielleicht mag. Tailwind CSS ist nicht die erste Utility-First CSS-Framework, aber sie ist derzeit die beliebteste.

Tailwind CSS vs Bootstrap

Bootstrap ist das beliebteste HTML-, CSS- und JavaScript-Framework für die Erstellung von responsiven Webapplikationen. Tailwind CSS hingegen ist das beliebteste Utility-First CSS-Framework für schnelle UI-Entwicklung. Der Hauptunterschied zwischen Tailwind CSS und Bootstrap ist, dass Tailwind CSS kein UI-Kit ist. Anders als UI-Kits wie “Bootstrap”, “Bulma” und “Foundation” hat Tailwind CSS kein Standard-Theme oder eingebaute UI-Komponenten. Stattdessen kommt es mit vorgefertigten Widgets, die man verwenden kann, um die Website von Grund auf neu zu erstellen. Bootstrap ist für seine Responsiveness bekannt, während Tailwind CSS typischerweise für die Customizability bekannt ist.

Bei Bootstrap sind die Komponente sehr abstrahiert worden, sodass man nur die zur Verfügung gestellten Pattern verwenden kann. Das gleiche gilt auch für andere UI-Kit artige Frameworks. Als Option haben wir in diesem Fall, dass man mit eigenen CSS überschreiben kann. Da kann es aber dazu kommen, dass man viel überschreiben muss. Mit Tailwind CSS kann man eine Reihe von Utility-Klassen verwenden, mit denen man genau das machen kann, was man braucht. Dadurch kann man sowohl flexibler als auch kreativer UIs erstellen.

Was bedeutet „utility-first“ überhaupt?

Eine Utility-First Library bedeutet einfach, dass Tailwind CSS uns im Gegensatz zu Bootstrap keine automatisch vorgestylten Komponenten liefert. Vielmehr gibt es uns Utility-Klassen, die uns helfen, unsere Komponente auf bestimmte Art und Weise zu stylen und erlaubt uns, unsere eigenen Klassen unter Verwendung dieser Utility-Klassen zu bauen. 

Wie man Tailwind CSS installiert

Obwohl CDN ein guter Weg ist, Styling im Projekt zu importieren, sind viele Funktionen von Tailwind CSS nicht über die CDN-Builds verfügbar. Um die Funktionen von Tailwind voll nutzen zu können, muss man Tailwind zunächst über npm installieren.

Tailwind ist auf npm verfügbar und kann über npm oder Yarn installiert werden:

Als nächstes wird eine Tailwind Config File erstellt. Tailwind wird fast vollständig in einfachem JavaScript konfiguriert.

Um dies zu tun, muss eine Tailwind Config File fürs Projekt erstellt werden. Es wird empfohlen, eine tailwind.js Datei im Root Folder des Projektes zu erstellen: