Webseiten stylen mit dem Frontend-Framework TailwindCSS
Das Frontend-Framework TailwindCSS erfreut sich zunehmender Beliebtheit, um Webseiten und ihre Komponenten ohne Schwierigkeiten zu gestalten.
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.
Loslegen mit TailwindCSS
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:
URL dieses Artikels:
https://www.heise.de/-4998896
Links in diesem Artikel:
[1] https://www.heise.de/hintergrund/Leitfaden-Schriftarten-rechtssicher-lizenzieren-9691510.html
[2] https://www.heise.de/tests/Kollaborativer-Screendesigner-Figma-Kostenlose-Web-App-im-Test-7314790.html
[3] https://www.heise.de/ratgeber/Figma-Das-beste-Design-Tool-fuer-Website-Prototypen-6337596.html
[4] https://www.heise.de/hintergrund/Taeuschungstricks-im-Netz-So-manipulieren-Dark-Patterns-6296088.html
[5] https://www.heise.de/tests/Website-erstellen-mit-KI-Fuenf-Website-Baukaesten-im-Test-6280778.html
[6] https://www.heise.de/hintergrund/Web-Layout-Mit-CSS-Generatoren-schneller-zur-fertigen-Website-6245327.html
[7] https://www.heise.de/ratgeber/Webseiten-responsiv-machen-So-sieht-Ihre-Seite-auf-allen-Endgeraeten-gut-aus-6034292.html
[8] https://www.heise.de/ratgeber/Webseiten-stylen-mit-dem-Frontend-Framework-TailwindCSS-4998896.html
Copyright © 2021 Heise Medien