Tailwind CSS ist ein Utility-First-Framework, das es Nut­ze­rin­nen und Nutzern erlaubt, Kom­po­nen­ten ei­gen­stän­dig zu de­fi­nie­ren. Das CSS ist sehr beliebt, erfordert al­ler­dings um­fang­rei­che Vor­kennt­nis­se.

KI-Assistent kostenlos – Ihr smarter All­tags­hel­fer
  • DSGVO-konform & sicher gehostet in Deutsch­land
  • Pro­duk­ti­vi­tät steigern – weniger Aufwand, mehr Output
  • Direkt im Browser starten – ohne In­stal­la­ti­on

Was bedeutet CSS-Framework?

Ein CSS-Framework ist eine Sammlung von Funk­tio­nen und Elementen, die für das Design einer Website benötigt werden. Da Ent­wick­le­rin­nen und Ent­wick­ler auf die vor­ge­fer­tig­ten Optionen zu­rück­grei­fen können, wird ihre Arbeit und die Zu­sam­men­ar­beit im Team damit im Idealfall deutlich ver­ein­facht. CSS-Frame­works verwenden dafür Code­bi­blio­the­ken, die dann im HTML-Code verwendet werden.

Tipp

Eine Website ganz nach Ihrem Geschmack: Mit dem Homepage-Baukasten von IONOS erstellen Sie Ihre pro­fes­sio­nel­le Website in nur drei Schritten. Von der ersten Idee bis zur Frei­schal­tung führen wir Sie dabei leicht ver­ständ­lich durch den Prozess.

Was ist Tailwind CSS?

Tailwind CSS ist ein sehr beliebtes CSS-Framework, das komplett auf den Utility-First-Ansatz setzt und Nut­ze­rin­nen und Nutzern Low-Level-CSS-Klassen in PostCSS zur Verfügung stellt, mit denen Kom­po­nen­ten und Designs ei­gen­stän­dig definiert werden können. Tailwind CSS wurde von Adam Wathan ent­wi­ckelt und 2017 erstmals ver­öf­fent­licht. Mitt­ler­wei­le wurde Tailwind CSS bereits mil­lio­nen­fach in­stal­liert.

Was zeichnet Utility-First-Frame­works aus?

Der große Vorteil von Utility-First-Frame­works wie Tailwind CSS ist ihre Fle­xi­bi­li­tät und die daraus re­sul­tie­ren­den Mög­lich­kei­ten zur In­di­vi­dua­li­sie­rung. Anders als her­kömm­li­che Cascading Style Sheets (CSS) stellen Utility-First-Frame­works keine vor­ge­fer­tig­ten Kom­po­nen­ten zur Verfügung, sondern bieten lediglich Utility-Klassen. Diese enthalten vor­de­fi­nier­te Stile, die dann auf ein Element an­ge­wen­det werden können. Das er­leich­tert die Arbeit, führt zu einem über­sicht­li­chen Code und bietet viele zu­sätz­li­che Ge­stal­tungs­mög­lich­kei­ten, die zu in­di­vi­du­el­le­ren Websites beitragen.

Tipp

Ihre Domain, Ihre On­line­prä­senz: Bei MyWebsite Now von IONOS nutzen Sie hoch­wer­ti­ge Templates für eine Website, die perfekt zu Ihnen passt. Schneller und einfacher finden Sie kein neues Zuhause im Internet.

Wann eignet sich Tailwind CSS?

Tailwind CSS eignet sich vor allem für Nut­ze­rin­nen und Nutzer, die bereits Vor­kennt­nis­se in CSS haben und sich mit den Be­son­der­hei­ten auskennen. Auch ein Grund­ver­ständ­nis von HTML ist für die Arbeit mit dem Utility-First-Framework wichtig, da Kom­po­nen­ten selbst­stän­dig erstellt werden müssen und sämtliche Styles direkt in den HTML-Dateien hin­ter­legt werden. Außer einigen Grund­la­gen wie Rändern, Größen und Farben ver­zich­tet Tailwind CSS auf Vorgaben. Mit der nötigen Erfahrung er­mög­licht Tailwind CSS-Ent­wick­le­rin­nen und -Ent­wick­lern eine freie Ge­stal­tung der Elemente ihrer Website und führt dabei sogar zu einer großen Zeit­er­spar­nis.

Das CSS eignet sich für Frontend-Web­pro­jek­te jeder Art und kann mit vielen gängigen Ja­va­Script-Frame­works ein­ge­setzt werden. So lassen sich z. B. Lavarel, Vue.js und React mit Tailwind CSS nutzen. Mit dieser Kom­bi­na­ti­on können Sie auf den ob­jekt­ori­en­tier­ten Ansatz vieler anderer Frame­works ver­zich­ten.

Vor- und Nachteile von Tailwind CSS

Mit seinem spe­zi­el­len Ansatz richtet sich Tailwind CSS also nicht an alle Nut­ze­rin­nen und Nutzer. Wenn Sie überlegen, ob der Utility-First-Ansatz für Sie der passende ist, hilft ein Blick auf die Vor- und Nachteile, die Tailwind CSS mitbringt.

Vorteile

  • Der Wechsel zwischen HTML-Files und CSS-Files entfällt. Die Arbeit läuft so in der Regel flüssiger.
  • Die Arbeit mit Tailwind CSS er­mög­licht in­di­vi­du­el­le­re Lösungen für wichtige Elemente auf einer Website. Diese sticht dadurch aus der Masse hervor.
  • Durch die vor­de­fi­nier­ten Klassen und die Ver­wen­dung von CSS Media Queries überzeugt Tailwind CSS als re­spon­si­ves Framework und funk­tio­niert auch auf mobilen Devices her­vor­ra­gend.
  • Der Ent­wick­lungs­pro­zess ist insgesamt schneller und wird durch Utility-Klassen er­leich­tert.
  • Die vor­de­fi­nier­ten Klassen helfen dabei, das CSS zu kom­pri­mie­ren.
  • Mit Tailwind CSS können Modal-Kom­po­nen­ten einfach im­ple­men­tiert werden.
  • Das Framework ist sehr stabil und leidet auch im Vergleich unter wenigen Bugs und Problemen.
  • Wenn Sie sich bereits mit CSS auskennen, wird Sie der logische Aufbau und Ansatz des Utility-First-Frame­works schnell über­zeu­gen und die Lernkurve relativ flach sein.
  • Wenn Sie gerade CSS lernen und gleich­zei­tig auf Tailwind CSS zu­rück­grei­fen möchten, hilft Ihnen eine um­fang­rei­che und leicht ver­ständ­li­che Do­ku­men­ta­ti­on.

Nachteile

  • Dennoch sind die ersten Schritte mit dem Framework ver­gleichs­wei­se schwierig, wenn Sie noch keine Er­fah­run­gen mit den Be­son­der­hei­ten und Tücken von CSS haben.
  • Der Code kann schnell un­über­sicht­lich werden, da viele In­for­ma­tio­nen in der HTML-Datei hin­ter­legt werden. Durch die Ver­mi­schung von Design und HTML wird außerdem gegen das Prinzip der „Se­pa­ra­ti­ons of concerns“ (Trennung der Ver­ant­wort­lich­kei­ten) verstoßen.
  • Bei der In­stal­la­ti­on von Tailwind CSS werden alle stan­dard­mä­ßi­gen CSS-Stile gelöscht. Sie müssen daher sämtliche Elemente zunächst neu anlegen. Das gilt auch für wichtige Kom­po­nen­ten wie Buttons, Header oder Na­vi­ga­ti­ons­leis­ten.
  • Bestimmte HTML-Elemente wie­der­ho­len sich im Markup, sodass der Code gegen den Grundsatz „Don’t repeat yourself!“ verstößt. Dies passiert bei­spiels­wei­se, wenn ein be­stimm­tes Element mehrere Male auf der Website verwendet werden soll.

Tailwind CSS in Vergleich mit anderen Frame­works

Wie andere Frame­works auch hat Tailwind CSS das Ziel, die Arbeit bei der Er­stel­lung einer Website möglichst zu er­leich­tern. Durch vor­de­fi­nier­te Klassen und bekannte CSS-Regeln können Homepages schneller und rou­ti­nier­ter erstellt werden. Da das Prinzip immer dasselbe ist, gelingt er­fah­re­nen Nutzern und Nut­ze­rin­nen der Wechsel zwischen zwei Frame­works relativ schnell. Während her­kömm­li­che Lösungen al­ler­dings zahl­rei­che feste Kom­po­nen­ten wie Buttons oder Na­vi­ga­ti­ons­leis­ten vorgeben, er­mög­licht bzw. erfordert Tailwind CSS die in­di­vi­du­el­le Er­stel­lung. Anders als manche anderen Frame­works richtet sich Tailwind CSS daher aus­drück­lich an Profis mit um­fang­rei­chen Vor­kennt­nis­sen im Umgang mit CSS.

Tipp

Flexibel ska­lier­bar und immer up-to-date: Setzen Sie auf Web­hos­ting bei IONOS und wählen Sie aus vier Tarifen den passenden für Ihre Zwecke. Min­des­tens eine Domain und ein SSL-Zer­ti­fi­kat sind immer inklusive.

So fügen Sie Tailwind CSS hinzu

Am ein­fachs­ten fügen Sie Tailwind CSS mit einem Pa­ket­ma­na­ger hinzu. Node.js sollte außerdem auf Ihrem Rechner in­stal­liert sein. Die ersten Schritte sehen dann fol­gen­der­ma­ßen aus:

Legen Sie zunächst ein neues Projekt im Terminal an.

npm init -y

Dadurch wird eine package.json-Datei im Grund­ver­zeich­nis erstellt. Die Er­wei­te­rung „-y“ dient dazu, Stan­dard­wer­te zu setzen.

Um die neueste stabile Version von Tailwind CSS als Ab­hän­gig­keit zu in­stal­lie­ren, nutzen Sie folgenden Befehl:

npm install -D tailwindcss

Die In­stal­la­ti­on kann einige Minuten dauern.

Um nun die Datei tailwind.config.js zu ge­ne­rie­ren, geben Sie diesen Befehl ein:

npx tailwindcss init

Der Inhalt dieser Datei sieht so aus:

module.exports = {
	theme: {
		extend: {} ,
	} ,
	variants: {} ,
	plugins: [] ,
}

Gehen Sie nun in den src-Ordner und fügen Sie folgende Zeilen zu Ihrer CSS-Datei hinzu:

@tailwind base;
@tailwind components;
@tailwind utilities;

Zum Schluss geben Sie folgenden Befehl im Terminal ein, um den Build-Prozess zu starten:

npx tailwindcss -i ./src/styles.css -o ./public/styles.css –watch

Fazit: Tailwind CSS ist ein Framework für Profis

Es ist keine Über­ra­schung, dass sich Tailwind CSS so großer Be­liebt­heit erfreut. Für erfahrene Ent­wick­le­rin­nen und Ent­wick­ler, die bereits alle CSS-Tricks kennen, ist das Framework eine gute Mög­lich­keit, um schneller und un­ge­bun­de­ner zu arbeiten. Anfänger und An­fän­ge­rin­nen sollten al­ler­dings besser auf eine andere Option zu­rück­grei­fen, da das Utility-First-Framework ein großes Feh­ler­po­ten­zi­al hat und nicht so einfach zu erlernen ist.

Tipp

Wenn Tailwind CSS nicht die richtige Wahl für Sie ist, gibt es zahl­rei­che andere Mög­lich­kei­ten. In unserem Digital Guide finden Sie neben einem Bootstrap-Tutorial auch alles Wichtige zu den un­ter­schied­li­chen Bootstrap-Al­ter­na­ti­ven: Lernen Sie, was LESS, SASS, YAML und Co. aus­zeich­net.

Zum Hauptmenü