Webdesign & -entwicklung

Tailwind CSS: Einführung in das Utility-First-CSS-Framework

Tailwind CSS - Karte
Veröffentlicht am:
Lesedauer:
2 Minuten

Tailwind CSS verbindet die Vorteile von normalem CSS mit den Vorteilen eines CSS-Frameworks.

Normales CSS hat den Vorteil der absoluten Flexibilität, mit der sich auch sehr individuelle Designs umsetzen lassen. Dafür muss man oft mit Unübersichtlichkeit und hohem Arbeitsaufwand kämpfen, da die CSS-Klassen abseits vom HTML-Code in einer eigenen Datei definiert werden.

Habe ich also vergessen, was die CSS-Klasse “card” genau macht, muss ich erst in die CSS-Datei wechseln und mir ansehen, was dort definiert ist. Gerade in größeren Projekten, kann die CSS-Datei schnell mal über 1.000 Zeilen haben und der Suchaufwand ist enorm.

Mit Frameworks wie z. B. Bootstrap bekommt man ein Webinterface zwar schnell auf die Beine gestellt, da Bootstrap aber gleich ganze Komponenten liefert, sehen alle Webseiten die damit erstellt wurden sehr ähnlich aus. Beim Individualisieren kämpft man immer gegen das vorgegebene Design an. Das ist schwierig und aufwändig.

Bei Tailwind CSS verbinden sich die Vorteile der Flexibilität und Individualität von normalem CSS mit der hohen Umsetzungsgeschwindigkeit und Einfachheit von herkömmlichen CSS-Frameworks.

Tailwind CSS arbeitet mit so genannten “Utility-Klassen”. Eine solche Klasse fasst merere CSS-Anweisungen in einer sinnvollen Kombination von Werten zusammen. - https://tailwindcss.com/docs/utility-first

Wenn man z. B. einem Div-Container abegrundete Ecken geben möchte, dann gibt man dem Container einfach die CSS-Klasse “rounded”.

Das Tailwind-Markup kann man “lesen”, wenn man gelernt hat, was die Abkürzungen bedeuten. Was die Klasse “card” alles beinhaltet, weiß ich dagegen erst, wenn ich sie in der CSS-Datei gefunden habe.

Tailwind Play

Mit Tailwind Play liefert uns Tailwind CSS einen online Spielplatz um das CSS-Framework auszuprobieren.

<div class="min-h-screen p-4 sm:p-6 md:p-8 flex items-center justify-center">
	<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6 md:gap-8">
		<div class="bg-gray-100 rounded-lg shadow-lg overflow-hidden">
			<img class="w-full object-cover" src="https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1579&q=80"alt="Tailwind CSS">
			<div class="p-4 space-y-4">
				<h1 class="text-3xl tracking-tight font-extrabold text-gray-900 sm:text-4xl">
					Servus Welt!
				</h1>
				<h2 class="text-2xl tracking-tighter font-semibold text-gray-700 sm:text-3xl">
					<span class="text-cyan-500">Tailwind CSS</span> Tutorial
				</h2>
				<p class="text-gray-700">
					Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam et est debitis consectetur animi non, voluptate libero ad suscipit autem sed labore recusandae itaque ipsum adipisci. Error, alias ipsam. Officiis.
				</p>
				<button class="px-4 py-2 bg-cyan-700 hover:bg-cyan-300 text-white hover:text-gray-900 rounded-md shadow-md"type="button">
				Klick mich!
				</button>
			</div>
		</div>
	</div>
</div>

Hier der Link zu diesem Code-Beispiel: https://play.tailwindcss.com/beuFqlt388

Fazit

Tailwind CSS ist das derzeit am schnellsten wachsende und vielversprechendste CSS-Framework. Es unterscheidet sich von anderen Frameworks wie Bootstrap durch eine hohe Flexibilität und Individualität. Mit den Utility-Klassen kann man direkt im HTML-Code lesen, was die verwendete CSS-Klasse macht.

Schlagwörter:
Tailwind CSSCSS