Webseiten stylen mit dem Frontend-Framework TailwindCSS

Das Frontend-Framework TailwindCSS erfreut sich zunehmender Beliebtheit, um Webseiten und ihre Komponenten ohne Schwierigkeiten zu gestalten.

Lesezeit: 16 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen 1 Beitrag
Von
  • Dr. Florence Maurice
Inhaltsverzeichnis
Mehr zu Webdesign

TailwindCSS ist ein sogenanntes Utility-Frontend-Framework: mithilfe von Klassen und ohne den HTML-Code zu verlassen, können Sie Webseiten und Komponenten rasch und unkompliziert aufhübschen.

Die Klassen bezeichnen dabei die einzelnen CSS-Formatierungen, über die sich dann Designs definieren lassen. Wer bisher mit einem Framework wie Bootstrap gearbeitet hat, wird den Ansatz erst einmal gewöhnungsbedürftig finden – aber es lohnt, sich darauf einzulassen: Mit TailwindCSS lässt sich schnell und produktiv arbeiten und es bietet weitreichende Konfigurationsmöglichkeiten und Erleichterungen bei der Arbeit mit CSS.

Die Projektseite con TailwindCSS bietet ein informative Einführung in das Thema.

Für TailwindCSS nutzen Sie ein normales HTML-Template mit HTML5-Doctype, Meta-Viewport-Angabe und einem Verweis auf die TailwindCSS-Datei. Im Beispiel heißt das Dokument index.html: