Je weiter du als Entwickler kommst, desto wahrscheinlicher ist es, dass du Technologien verwendest, die dir helfen, mehr zu tun und dabei weniger Code zu schreiben. Ein solides Frontend-Framework wie Tailwind CSS ist eine Möglichkeit, das zu erreichen.

In diesem Artikel lernen wir Tailwind CSS kennen – ein CSS-Framework, das bei der Erstellung und Gestaltung von Webseiten hilft. Wir erklären dir zunächst, wie du Tailwind CSS installierst und in dein Projekt integrierst, sehen uns einige praktische Anwendungen an und erfahren, wie du deine eigenen Stile und Plugins erstellen kannst.

Aufgeregt? Dann lass uns beginnen!

Was ist Tailwind CSS?

Tailwind CSS.
Tailwind CSS.

Tailwind CSS ist ein CSS-Framework (Cascading Style Sheets) mit vordefinierten Klassen, mit denen du Webseiten direkt in deinem Markup erstellen und gestalten kannst. Damit kannst du CSS in Form von vordefinierten Klassen in dein HTML schreiben.

Wir definieren, was ein Framework ist und was wir mit „Utility-first CSS“ meinen, damit du besser verstehst, worum es bei Tailwind CSS geht.

Was ist ein Framework?

Als allgemeiner Programmierbegriff ist ein Framework ein Werkzeug, das wiederverwendbare und vorgefertigte Komponenten bereitstellt, die auf den Funktionen eines bereits vorhandenen Werkzeugs aufbauen. Der Hauptzweck von Frameworks besteht darin, die Entwicklungsgeschwindigkeit zu erhöhen, indem weniger Arbeit anfällt.

Nachdem wir nun die Bedeutung eines Frameworks geklärt haben, solltest du verstehen, dass Tailwind CSS ein Tool ist, das auf CSS-Funktionen aufbaut. Alle Funktionen des Frameworks wurden von CSS-Stilen abgeleitet, die als Klassen zusammengestellt wurden.

Was ist ein Utility-First-CSS-Framework?

Wenn wir von Utility-First-CSS sprechen, beziehen wir uns auf Klassen in unserem Markup (HTML) mit vordefinierten Funktionalitäten. Das bedeutet, dass du nur eine Klasse schreiben musst, die mit vordefinierten Stilen versehen ist, und diese Stile werden auf das Element angewendet.

Wenn du mit Vanilla CSS (CSS ohne Framework oder Bibliothek) arbeitest, gibst du deinem Element zunächst einen Klassennamen und fügst dieser Klasse dann verschiedene Eigenschaften und Werte hinzu, die wiederum das Styling auf dein Element anwenden.

Wir zeigen dir ein Beispiel. Wir erstellen eine Schaltfläche mit abgerundeten Ecken und einem Text, der „Klick mich“ sagt So wird die Schaltfläche aussehen:

Ein rechteckiger schwarzer Button mit leicht abgerundeten Ecken und weißem Text mit der Aufschrift "Klick mich".
Unser Button.

Wir machen das zuerst mit Vanilla CSS und dann mit den Utility-Klassen, die in Tailwind CSS verfügbar sind.

Mit Vanilla CSS

<button class="btn">Click me</button>

Wir haben den Button-Tags die Klasse btn gegeben, die mit einem externen Stylesheet gestylt wird. Das heißt:

.btn {
  background-color: #000;
  color: #fff;
  padding: 8px;
  border: none;
  border-radius: 4px;
}

Mit Tailwind CSS

<button class="bg-black p-2 rounded">Click me</button>

Das alles ist nötig, um den gleichen Effekt zu erzielen wie im Beispiel mit Vanilla CSS. Es wurde kein externes Stylesheet erstellt, in das du die Stile schreiben musst, weil jeder Klassenname, den wir verwendet haben, bereits einen vordefinierten Stil hat.

Voraussetzungen für die Verwendung von Tailwind CSS

Bevor du Tailwind CSS verwendest, solltest du einige Voraussetzungen erfüllen, damit du die Funktionen des Frameworks ohne Schwierigkeiten nutzen kannst. Hier sind ein paar von ihnen:

Wo kann Tailwind CSS eingesetzt werden?

Du kannst Tailwind CSS in Frontend-Webprojekten verwenden, einschließlich JavaScript-Frameworks wie React.js, Next.js, Laravel, Vite, Gatsby usw.

Vor- und Nachteile von Tailwind CSS

Hier sind einige der Vorteile von Tailwind CSS:

  1. Schnellerer Entwicklungsprozess
  2. Hilft dir, dein CSS besser zu üben, da die Hilfsmittel ähnlich sind
  3. Alle Hilfsmittel und Komponenten sind leicht anpassbar
  4. Die Gesamtdateigröße für die Produktion ist in der Regel gering
  5. Leicht zu erlernen, wenn du bereits CSS kennst
  6. Gute Dokumentation zum Lernen

Einige der Nachteile von Tailwind CSS sind:

  1. Bei großen Projekten kann dein Markup unübersichtlich aussehen, weil sich alle Stile in den HTML-Dateien befinden.
  2. Es ist nicht einfach zu lernen, wenn du CSS nicht gut verstehst.
  3. Du bist gezwungen, alles von Grund auf neu zu erstellen, auch deine Eingabeelemente. Wenn du Tailwind CSS installierst, entfernt es alle Standard-CSS-Stile.
  4. Tailwind CSS ist nicht die beste Wahl, wenn du die Zeit für die Entwicklung des Frontends deiner Webseite minimieren und dich hauptsächlich auf die Backend-Logik konzentrieren willst.

Wann sollte Tailwind CSS verwendet werden?

Tailwind CSS ist am besten geeignet, um den Entwicklungsprozess zu beschleunigen, indem du weniger Code schreibst. Es verfügt über ein Designsystem, das die Konsistenz verschiedener Designanforderungen wie Auffüllungen, Abstände usw. sicherstellt; damit musst du dich nicht um die Erstellung deiner Designsysteme kümmern.

Du kannst Tailwind CSS auch verwenden, wenn du ein Framework suchst, das leicht konfigurierbar ist, weil es dich nicht zwingt, Komponenten (Navigationsleisten, Schaltflächen, Formulare usw.) immer auf die gleiche Weise zu verwenden; du kannst selbst entscheiden, wie deine Komponenten aussehen sollen. Aber du solltest Tailwind nicht benutzen, wenn du CSS nicht gelernt und geübt hast.

Gemeinsamkeiten und Unterschiede zwischen Tailwind CSS und anderen CSS-Frameworks

Hier sind ein paar Gemeinsamkeiten:

  1. Sie helfen dir, deine Arbeit schneller zu erledigen.
  2. Sie kommen mit vordefinierten Klassen.
  3. Sie wurden auf CSS-Regeln aufgebaut.
  4. Sie sind einfach zu erlernen und zu benutzen, wenn du dich mit CSS auskennst.

Schauen wir uns nun einige Unterschiede an:

  1. Tailwind unterscheidet sich von den meisten Frameworks, weil du deine Komponenten selbst erstellen musst. Bootstrap hat zum Beispiel Komponenten wie Navigationsleisten, Schaltflächen und so weiter, aber bei Tailwind musst du das alles selbst erstellen.
  2. Einige Frameworks wie Bootstrap lassen sich nicht so leicht anpassen, sodass du gezwungen bist, ihre Designmuster zu verwenden. In Tailwind hast du die Kontrolle über den Ablauf von allem.
  3. Um Tailwind zu nutzen, brauchst du fundierte Kenntnisse in CSS. Es reicht nicht aus, Klassennamen zu schreiben, denn du musst sie so kombinieren, als würdest du Vanilla CSS schreiben, um das gleiche Ergebnis zu erzielen. Bei den meisten anderen Frameworks musst du nur wissen, welche Komponente erstellt wird, wenn du einen Klassennamen verwendest.

Wie du mit Tailwind CSS anfängst

Bevor du Tailwind CSS installierst und in dein Projekt integrierst, solltest du sicherstellen, dass:

  1. Du hast Node.js auf deinem Computer installiert, um den Node-Paketmanager (npm) im Terminal zu nutzen.
  2. Dein Projekt ist fertig eingerichtet und deine Dateien sind erstellt.

So sieht unsere Projektstruktur im Moment aus:

-Tailwind-tutorial
    -public
        -index.html
        -styles.css
    -src
        -styles.css

Starte als Nächstes ein Terminal für dein Projekt und führe die folgenden Befehle aus:

    npm install -D tailwindcss

Mit dem obigen Befehl wird das Tailwind CSS-Framework als Abhängigkeit installiert. Als Nächstes generierst du deine Datei tailwind.config.js, indem du den folgenden Befehl ausführst:

    npm install -D tailwindcss

Die Datei tailwind.config.js ist leer, wenn sie erstellt wird, also müssen wir einige Codezeilen hinzufügen:

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Die Dateipfade, die im Inhaltsfeld angegeben sind, ermöglichen es Tailwind, unbenutzte Stile während der Erstellung zu löschen.

Als Nächstes musst du die „@tailwind“-Direktiven zu deiner CSS-Datei im src-Ordner hinzufügen – hier erzeugt Tailwind alle vordefinierten Stile für dich:

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

Als Letztes musst du den Erstellungsprozess starten, indem du diesen Befehl in deinem Terminal ausführst:

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

Im obigen Code teilen wir Tailwind mit, dass unsere Eingabedatei das Stylesheet im src-Ordner ist und dass alle Stile, die wir verwendet haben, in die Ausgabedatei im public-Ordner eingebaut werden müssen. --watch ermöglicht es Tailwind, deine Datei auf Änderungen zu überwachen, um einen automatischen Bauprozess zu ermöglichen; wenn wir es weglassen, müssen wir das Skript jedes Mal ausführen, wenn wir unseren Code bauen und die gewünschte Ausgabe sehen wollen.

Tailwind CSS verwenden

Nachdem wir nun Tailwind CSS für unser Projekt installiert und eingerichtet haben, wollen wir uns einige Beispiele ansehen, um die Anwendung vollständig zu verstehen.

Flexbox-Beispiel

Um Flex in Tailwind CSS zu verwenden, musst du eine Flexklasse und die Richtung der Flexelemente hinzufügen:

    <div class="flex flex-row">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>
Unsere drei lila Buttons.
Unsere drei lila Buttons.

Wenn du flex-row-reverse verwendest, wird die Reihenfolge, in der die Schaltflächen erscheinen, umgekehrt.

flex-col stapelt sie übereinander. Hier ist ein Beispiel:

    <div class="flex flex-col">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>
Drei vertikal ausgerichtete Schaltflächen mit der CSS-Hilfsklasse flex-col von Tailwind.
Unsere drei lila Buttons.

Genau wie im vorherigen Beispiel, flex-col-reverse kehrt sich die Reihenfolge um.

Beispiel für ein Raster

Bei der Angabe von Spalten und Zeilen im Rastersystem gehen wir anders vor, indem wir eine Zahl übergeben, die bestimmt, wie die Elemente den verfügbaren Platz einnehmen werden:

<div class="grid grid-cols-3">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
      <button> Button 4 </button>
      <button> Button 5 </button>
      <button> Button 6 </button>
    </div>
Sechs gleichmäßig in Spalten verteilte Schaltflächen mit der CSS-Hilfsklasse grid-cols von Tailwind.
Unsere sechs lilafarbenen Schaltflächen.

Farben

Tailwind kommt mit einer Menge vordefinierter Farben. Jede Farbe hat eine Reihe von verschiedenen Variationen, wobei die hellste Variante 50 und die dunkelste 900 ist.

Hier ist ein Bild mit mehreren Farben und ihren HTML-Hex-Codes, um das zu verdeutlichen

Die Farbvarianten von Tailwind CSS für Rot, Orange und Bernstein
Farben aus der Standardpalette von Tailwind anpassen.(Bildquelle)

Wir zeigen dir ein Beispiel, wie du das machen kannst, indem du die rote Farbe oben benutzt, um einem Schaltflächenelement eine Hintergrundfarbe zu geben:

<button class="bg-red-50">Click me</button>
<button class="bg-red-100">Click me</button>
<button class="bg-red-200">Click me</button>
<button class="bg-red-300">Click me</button>
<button class="bg-red-400">Click me</button>
<button class="bg-red-500">Click me</button>
<button class="bg-red-600">Click me</button>
<button class="bg-red-700">Click me</button>
<button class="bg-red-800">Click me</button>
<button class="bg-red-900">Click me</button>

Diese Syntax ist für alle Farben in Tailwind gleich, mit Ausnahme von Schwarz und Weiß, die auf die gleiche Weise geschrieben werden, allerdings ohne die Verwendung von Zahlen bg-black und bg-white.

Um eine Textfarbe hinzuzufügen, verwendest du die Klasse text-{color}:

<p class="text-yellow-600">Hello World</p>

Padding

Tailwind verfügt bereits über ein Gestaltungssystem, das dir dabei hilft, eine einheitliche Skala in deinen Entwürfen beizubehalten. Alles, was du wissen musst, ist die Syntax für die Anwendung der einzelnen Hilfsmittel.

Im Folgenden findest du Hilfsprogramme zum Hinzufügen von Auffüllungen zu deinen Elementen:

  • p bezeichnet das Padding über das gesamte Element.
  • py bezeichnet padding padding-top und padding-bottom.
  • px steht für padding-left und padding-right.
  • pt bezeichnet padding-top.
  • pr kennzeichnet padding-right.
  • pb bezeichnet padding-bottom.
  • pl kennzeichnet padding-left

Um sie auf deine Elemente anzuwenden, musst du die entsprechenden Zahlen von Tailwind verwenden – ähnlich wie die Zahlen, die im letzten Abschnitt für die Farbvarianten standen. Das meinen wir folgendermaßen:

<button class="p-0">Click me</button>
<button class="pt-1">Click me</button>
<button class="pr-2">Click me</button>
<button class="pb-3">Click me</button>
<button class="pl-4">Click me</button>

Ränder

Die vordefinierten Hilfsmittel für Padding und Margin sind sehr ähnlich. Du musst das p durch ein m ersetzen:

  • m
  • my
  • mx
  • mt
  • mr
  • mb
  • ml

Wie man ein Tailwind CSS Plugin erstellt

Auch wenn Tailwind CSS bereits viele Hilfsprogramme und Gestaltungssysteme für dich bereithält, kann es sein, dass du eine bestimmte Funktionalität haben möchtest, um die Einsatzmöglichkeiten von Tailwind zu erweitern. Mit Tailwind CSS können wir das tun, indem wir ein Plugin erstellen.

Machen wir uns die Hände schmutzig, indem wir ein Plugin erstellen, das die Farbe Aqua hinzufügt und ein Dienstprogramm zum Drehen, das ein Element um 150º auf der X-Achse dreht. Wir erstellen diese Hilfsprogramme in der Datei tailwind.config.js mit ein wenig JavaScript.

const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      const myUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(myUtilities);
    }),
  ],

};

Schauen wir uns das mal genauer an. Als Erstes importieren wir die Plugin-Funktion von Tailwind:

const plugin = require("tailwindcss/plugin");

Dann haben wir unsere Plugins im Plugins-Array erstellt:

  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(newUtilities);
    }),
  ],

Möglicherweise musst du das Build-Skript nach der Erstellung deines Plugins noch einmal ausführen.

Jetzt, wo die Plugins fertig sind, können wir sie testen:

<button class="bg-aqua rotate-150deg">Click me</button>

Wenn du alles richtig gemacht hast, solltest du eine Schaltfläche in Aquafarbe haben, deren Text um 150° auf der X-Achse gedreht ist.

Zusammenfassung

Frameworks sind eine unschätzbare Option, wenn es darum geht, deinen Arbeitsablauf zu beschleunigen. Sie helfen dir, gut aussehende und professionelle Webseiten zu erstellen und gleichzeitig ein einheitliches Design zu gewährleisten. Tailwind CSS bietet viele nützliche CSS-Klassen, mit denen du dein Webdesign und deine Entwicklung auf die nächste Stufe heben kannst.

In diesem Artikel haben wir gelernt, was Tailwind CSS ist und was es zu einem Framework macht. Anschließend haben wir uns den Installationsprozess angeschaut und einige Beispiele gesehen, die uns gezeigt haben, wie wir unsere eigenen Plugins erstellen können, um die vorhandenen Funktionen zu erweitern.

Wenn du bis zu diesem Punkt durchgehalten hast, hast du jetzt ein grundlegendes, aber solides Verständnis davon, wie Tailwind funktioniert. Um ein solches Framework, bei dem die Nützlichkeit im Vordergrund steht, besser nutzen zu können, musst du allerdings weiter üben und deine CSS-Kenntnisse erweitern, wenn du nicht schon eine solide Grundlage hast.

Hast du Tailwind CSS oder ein anderes CSS-Framework in der Vergangenheit benutzt? Teile uns deine Meinung in den Kommentaren mit!

Ihechikara Abba

Ihechikara is a software developer and technical writer. He enjoys writing articles on web technologies, programming, and IT-related topics.
Connect with Ihechikara on Twitter.