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: 8 Min.
In Pocket speichern
vorlesen Druckansicht Kommentare lesen
Von
  • 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:

Immer mehr Wissen. Das digitale Abo für IT und Technik.

  • Zugriff auf alle Inhalte von heise+
  • exklusive Tests, Ratgeber & Hintergründe: unabhängig, kritisch fundiert
  • c't, iX, Technology Review, Mac & i, Make, c't Fotografie direkt im Browser lesen
  • einmal anmelden – auf allen Geräten lesen - monatlich kündbar
  • erster Monat gratis, danach monatlich 9,95 €
  • Wöchentlicher Newsletter mit persönlichen Leseempfehlungen des Chefredakteurs
GRATIS-Monat beginnen Jetzt GRATIS-Monat beginnen Mehr Informationen zu heise+