Tailwind CSS - Das Tutorial zum CSS Framework

Einleitung

In diesem Tutorial möchte ich Ihnen eines der derzeit am schnellsten wachsenden und vielversprechendsten CSS Frameworks vorstellen. Es unterscheidet sich von anderen Frameworks wie Bootstrap, da es auf einer neuen Art der Erstellung von Benutzeroberflächen basiert. Man spricht hierbei von der Utility-First-CSS-Klassenstruktur.

Am Ende dieses Tutorials können Sie mit den Utility-First-Klassen von Tailwind CSS einen responsiven Hero-Bereich (Live-Demo) erzeugen. Hier ist das Inhaltsverzeichnis für dieses Tutorial für Tailwind CSS:

Einführung in Tailwind CSS
Hinzufügen von Tailwind CSS zu Ihrem Projekt über einen Paketmanager
Erstellen und Verarbeiten einer Konfigurationsdatei und mit Tailwind
Aufbau einer responsiven Hero-Sektion mit den Utility-First-Klassen von Tailwind
Schriftarten und Farben anpassen. Zusätzliche Klassen durch Konfigurationsdatei hinzufügen
Reduzieren der Ladezeit und der Dateigröße, indem nicht verwendete Klassen aus dem CSS entfernt werden
Zusammenfassung

Bevor Sie beginnen, werfen wir einen Blick auf die Ordnerstruktur, die Sie am Ende dieses Tutorials haben sollten. Als Programmierumgebung empfehle ich Ihnen Visual Code. Dieses besitzt eine integrierte Terminalumgebung, welche wir gleich noch benötigen werden.

        
.
├── public
│       ├── styles.css
│       ├── logo.svg
│       └── index.html
├── node_modules
│       └── ...
├── main.css
├── tailwind.config.js
├── package-lock.json
├── package.json
└── tailwind.config.js

In der Benennung der Ordner haben Sie freie Wahl. Ich empfehle Ihnen aber zumindest im Tutorial genau diese Ordnerstruktur beizubehalten.

Einführung in Tailwind CSS

Tailwind CSS ist heute das weltweit populärste Utility-First-CSS-Framework. Es bietet eine umfangreiche Sammlung von Low-Level-CSS-Klassen, die sich flexibel kombinieren lassen – ideal für effizientes, modernes Web-Styling direkt im Markup. Seit seiner ersten Veröffentlichung 2017 (erste Major-Version ab Mai 2019) hat sich Tailwind zu einem festen Bestandteil moderner Frontend-Entwicklung entwickelt.

Beliebtheit & Verteilung: Bis August 2025 wurden mehr als 807 Millionen Downloads gezählt – aktuell sind wöchentlich rund 9–10 Millionen Downloads üblich. In 2024 war Tailwind das meistgenutzte CSS-Framework, und auf GitHub wurde es bis Juli 2025 über 88.900 Mal mit einem Stern bewertet.

Techniken & Workflow: Tailwind setzt auf einen JIT-Compiler, der nur tatsächlich verwendete Klassen generiert – das spart deutlich an CSS-Größe. Über eine Konfigurationsdatei lässt sich das Design-System anpassen, und die Integration in Frameworks wie React, Vue oder Angular gelingt problemlos. Ergänzt durch Bibliotheken wie Headless UI, daisyUI oder Tailwind Plus wird der Einstieg weiter erleichtert.

Pro & Contra: Dank Utility-First ist Tailwind ideal für schnelles Prototyping, Konsistenz und Performance. Gleichzeitig kann die Vielzahl an Klassen unübersichtlich werden – hier helfen etablierte Best Practices wie strukturierte Nutzung mit @layer, sinnvollem @apply und klarer Klassenorganisation.

Vergleich Tailwind vs. Bootstrap: Tailwind dominiert aktuell in Community-Beliebtheit, Flexibilität und Download-Zahlen – während Bootstrap weiterhin seine Stärken bei schneller Standard-Entwicklung und vorgefertigten Komponenten hat.

Fazit: Tailwind CSS bietet heute weit mehr als nur ein Nebenprojekt – es ist eine hochentwickelte, performante und flexible Plattform für moderne Webentwicklung.

Hinzufügen von Tailwind CSS zu Ihrem Projekt über einen Paketmanager

Es gibt mehrere Möglichkeiten, Tailwind CSS in Ihr Projekt einzubinden. Auch wenn es eine schnelle Methode über direkte Einbindung per CDN gibt, ist dies zumindest für produktive Umgebungen nicht zu empfehlen. Der Hauptgrund liegt darin, dass der vollständige Build über 3,7 MB umfasst. Die empfohlene Methode ist die Nutzung eines Paketmanagers. Später können wir dann die Konfiguration über PostCSS durchführen.

In diesem Tutorial zeige ich Ihnen, wie Sie die neueste stabile Version von Tailwind CSS über NPM einbinden. Danach werden wir eine Tailwind-Konfigurationsdatei erstellen und das CSS darauf basierend verarbeiten.

Stellen Sie zunächst sicher, dass Node.js und NPM auf Ihrem Computer installiert sind. Wenn Sie noch keine Datei package.json haben, führen Sie den folgenden Befehl mit dem Terminal im Stammverzeichnis Ihres Projekts aus:


npm init -y

Der Befehl erzeugt eine package.json-Datei im Grundverzeichnis. Diese enthält Informationen zu Ihrem Projekt und zukünftigen Bibliotheksabhängigkeiten. Die Erweiterung -y setzt Standardwerte. Führen Sie anschließend den folgenden Befehl in Ihrem Terminal aus, um die neueste stabile Version von Tailwind CSS zu installieren:


npm install tailwindcss@latest postcss@latest autoprefixer@latest

Hierdurch wird Tailwind CSS im node_modules-Ordner verfügbar. Bei der nächsten Installation über npm install wird Tailwind CSS automatisch als Abhängigkeit in Ihr Projekt geladen.

Es handelt sich dabei um eine einfache Möglichkeit, Projektabhängikeiten umgebungsübergreifend zu verwalten. Achtung: Der Vorgang kann durchaus einige Minuten in Anspruch nehmen.

Hinzufügen von Tailwind zu Ihrem CSS

Nachdem Sie Tailwind CSS mit NPM installiert haben, müssen Sie die benutzerdefinierte @tailwind-Direktive verwenden und die Basis-, Komponenten- und Programmstyles von Tailwind in Ihre CSS-Hauptdatei einfügen. Erstellen Sie dazu im public-Verzeichnis eine neue CSS-Datei mit dem Namen main.css.

Fügen Sie dann in die neue CSS-Datei folgende Zeilen ein


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

Sobald die Datei später mit Tailwind verarbeitet wird, werden diese 3 Zeilen durch die tatsächlichen Styledefinition von Tailwind ausgetauscht. Dazu kommen wir aber später.

Erstellen und Verarbeiten einer Konfigurationsdatei und mit Tailwind

Die empfohlene Art der Entwicklung mit Tailwind CSS besteht darin, eine Konfigurationsdatei zu haben, die Sie währenddessen entsprechend Ihren Anforderungen bearbeiten. Sie können die Standard-Klassen von Tailwind einfach hinzufügen und bearbeiten. Es sind dabei faktisch keine Grenzen gesetzt.

Führen Sie im Terminal folgenden Befehl aus um eine Standard Konfigurationsdatei zu erzeugen:

    
npx tailwindcss init

Das Terminal wird Ihnen bei Erfolg folgende Meldung ausgeben:


Created Tailwind CSS config file: tailwind.config.js

Durch den Befehl wird die tailwind.config.js mit folgendem Inhalt im Grundverzeichnis generiert:

    
    
// tailwind.config.js
module.exports = {
    future: {},
    purge: [],
    theme: {
    extend: {},
    },
    variants: {},
    plugins: [],
}

Zu dieser Standard-Datei fügen wir noch folgende 2 Plugins hinzu:

    
plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
]

Verarbeiten Sie Ihr CSS mit Tailwind

Später in diesem Tutorial zeige ich Ihnen, wie Sie automatisch nach Änderungen in Ihrer CSS-Datei suchen. Für den Moment führen Sie folgenden Befehl aus, um die Datei main.css zu kompilieren und eine neue Datei namens styles.css zu erstellen. Diese wird dann die tatsächliche CSS-Datei, die in die HTML-Dateien eingefügt wird:

    
npx tailwindcss build main.css -o public/styles.css

Wenn Sie sich Ihre Ordnerstruktur ansehen, werden Sie bemerken, dass eine neue Datei „styles.css“ im public-Ordner generiert wurde. Diese enthält alle Tailwind-Klassen. Dementsprechend ist diese Datei auch sehr groß.

Einbinden von Tailwind CSS in Ihre HTML-Datei

Erstellen Sie eine HTML-Datei mit Namen „index.html“ im „public“-Verzeichnis Ihres Projektes. Fügen Sie dort den Link zu unserer neu erzeugten „styles.css“-Datei ein. Ihre Datei sollte ungefähr so aussehen:

    
    
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Tutorial</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Hier kommt später der Inhalt -->
</body>
</html>

Mit diesem Schritt haben Sie Tailwind eingerichtet. Im nächsten Abschnitt dieses Tutorials erfahren Sie, wie Sie mit den Utility-Klassen von Tailwind CSS einen responsiven Hero-Abschnitt erstellen.

Aufbau einer responsiven Hero-Sektion mit den Utility-First-Klassen von Tailwind

Beginnen wir nun damit, eine Hero-Sektion mit den Utility-First-Klassen von Tailwind CSS zu erstellen. Ziel dieses Tutorial-Abschnittes ist es, eine Navigationsleiste mit einem Logo, Menüpunkten und einigen Call-to-Action-Buttons zu erstellen und dann mit einer Hero-Sektion fortzufahren.

tailwind hero site beispiel <?php echo keyword_shuffle($keywords); ?>

In unserer bereits existierenden index.html-Datei fügen wir 2 neue Tags hinzu, welche als Wrapper für die Navigation dienen:

            
<header>
    <nav>
        <!-- Hier kommt das Logo hin -->

        <!-- Hier wird das Menü sein -->

        <!-- der CTA-Button -->
    </nav>
</header>

Nachdem wir nun den Basisbereich der Navigationsleiste erstellt haben, können wir die Utility-Klassen von Tailwind CSS verwenden um das Layout zu erzeugen.

Wir erweitern das <nav> um folgende Klassen:

        
<nav class="flex items-center justify-between p-6 container mx-auto">

Dies sieht auf den ersten Blick sehr verwirrend aus. Deshalb schauen wir uns die gesetzten Klassen nun im Detail an:

flex – wendet die display: flex-Eigenschaft auf das Element an.
items-center – Durch Flexbox werden die Elemente innerhalb des Nav-Elements vertikal ausgerichtet
p-6 – Fügt allen Elementen ein Padding (padding: 1.5rem; hinzu
container – setzt die max-width eines Elements so, dass sie mit der min-width des aktuellen Breakpoints übereinstimmt (standardmäßig 1280px)
mx-auto – wendet ein margin:auto; an, wodurch das Navigationselement horizontal zentriert wird

Nun sollte sich die Verwirrung etwas gelegt haben. Die Klassen sind wirklich sehr logisch aufgebaut.

Fahren wir fort, indem wir ein Logo auf der linken Seite der Navigationsleiste hinzufügen.

        
<img src="logo.svg" alt="Unternehmenslogo" class="w-32">

Nachdem wir das Logo eingebunden haben, beschäftigen wir uns mit dem Menü. Dazu ergänzen wir unsere Datei mit dem folgenden Inhalt:

     
<div class="text-lg text-gray-600 hidden lg:flex">
    <a href="#" class="block mt-4 lg:inline-block text-green-600 lg:mt-0 mr-9">
        Startseite
    </a>
    <a href="#" class="block mt-4 lg:inline-block hover:text-gray-700 lg:mt-0 mr-9">
        Leitungen
    </a>
    <a href="#" class="block hover:text-gray-700 mt-4 lg:inline-block lg:mt-0 mr-9">
        Über uns
    </a>
    <a href="#" class="block hover:text-gray-700 mt-4 lg:inline-block lg:mt-0">
        Kontakt
    </a>
</div>

Auch hier werfen wir einen Blick auf die Bedeutung der Klassen, welche wir dem ersten <div>-Element hinzugefügt haben:

text-lg – wendet eine etwas größere Schriftgröße für den Text innerhalb des Elements an (Standard: font-size: 1.125rem;)
text-gray-600 – Grauer Text mit der Intensität von 600. Die Spanne geht von text-gray-100 bis text-gray-900. Desto höher der Wert, desto dunkler.
hidden – das Element wird versteckt durch display: none;
lg:flex – dies ist eine responsive Klasse. Wir gehen hierauf später noch etwas genauer ein. lg steht hierbei für große Bildschirme. Flex wird also für große Auflösungen aktiviert.

Die Klassen der einzelnen Menüpunkte haben folgende Bedeutungen:

block – das Element bekommt display:block;
mt-4 – setzt einen Margin-Top auf das Element
lg:inline-block – für größere Geräte wird das Element zu einem Inline-Element, wodurch die Menüpunkte in einer Zeile bleiben
hover:text-gray-700 – Wenn Sie mit der Maus über das Element fahren, wird die Farbe des Menüelements etwas dunkler
lg:mt-0 – bei größeren Geräten kein Margin-Top (sinnvoll, da auf Mobilgeräten die Menüpunkte untereinander angezeigt werden, bei größeren Geräten jedoch alle in einer Reihe)
mr-9 – Es wird ein margin-right gesetzt, um die Menüpunkte sauber voneinander zu trennen

Zum Schluss fügen wir noch zwei CTA-Buttons hinzu und zeigen ein Hamburger-Menüsymbol für mobile Geräte rechten Seite der Navigationsleiste an:

    
<div class="flex items-center">
    <div class="mr-5 lg:mr-0">
        <button class="py-2 px-6 rounded-md text-gray-600 hover:text-gray-700 text-lg">Anmelden</button>
        <button class="py-2 px-6 bg-green-300 hover:bg-green-400 rounded-md text-white text-lg">Registrieren</button>
    </div>
    <div class="block lg:hidden">
        <button class="flex items-center px-4 py-3 border rounded text-green-500 border-green-500 focus:outline-none">
            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <title>Menu</title>
                <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
            </svg>
        </button>
    </div>
</div>

Die Klasse rounded-md fügt den Schaltflächen einen kleinen Radius hinzu. Die anderen Klassen sind ähnlich der Klassen, welche wir weiter oben schon behandelt haben.

Aufbau der Hero-Sektion

tailwind hero sektion beispiel <?php echo keyword_shuffle($keywords); ?>

Nachdem wir nun mit der Navigationsleiste fertig sind, beginnen wir mit dem Aufbau der Hero-Sektion. Sie besteht aus zwei Teilen: dem Beschreibungsteil links und dem Anmeldeformular rechts. Beginnen wir wie immer mit den Wrapper-Elementen:

 
    
<main class="mt-12 lg:mt-32">
    <section class="container mx-auto px-6">
        <!-- Hier kommt die Hero-Sektion hin -->
    </section>
</main>

Die ersten beiden Margin-Klassen von Tailwind CSS für das <main>-Tag werden verwendet, um einen geeigneten Abstand zwischen dem Hauptinhalt und der Navigationsleiste zu schaffen. Danach werden die klassischen Containerklassen verwendet, um den Inhalt horizontal zu zentrieren und ein zusätzliches px-6 wird verwendet, um ein Padding anzuwenden welches dem Abstand der Navigationsleiste entspricht.

In die <section> fügen wir nun einen weiteren <div>-Wrapper ein, in welchen wir dann das zweispaltige Layout legen:

 
        
<div class="w-full lg:flex items-center">
    <div class="w-full lg:w-1/2">
        <!-- Beschreibung -->
    </div>
    <div class="w-full lg:w-1/2 lg:pl-24">
        <!-- Hier kommt das Formular hin -->
    </div>
</div>

Hier kommt die Macht von Tailwind zum Tragen. Wir haben ein zweispaltiges Layout, das auf Mobilgeräten zu einem Spaltenlayout werden muss. Es ist es sehr einfach, diese responsiven Stile mit den Klassen von Tailwind festzulegen.

Die Klasse lg:w-1/2 legt fest, dass das Element eine Breite von 50% hat. Dies gilt jedoch nur für große Geräte (lg). Als Standard wird w-full genutzt, was eine Breite von 100% (width:100%;) setzt.

Die Klasse lg:pl-24 für das zweite Element dient dazu, einen Abstand zwischen der Beschreibung und dem Formular festzulegen. Auch hier gilt dies wieder nur für große Geräte.

Folgenden Quelltext fügen wir nun dem ersten <div>-Wrapper hinzu. Dies wird der Inhalt der Beschreibungsseite:

        
    
<h2 class="text-md lg:text-2xl text-gray-600">CSS3 und Bootstrap abgelöst?</h2>
<h1 class="text-5xl lg:text-6xl font-bold text-green-600 mb-2 lg:mb-6">Lernen Sie jetzt TailwindCSS!</h1>
<p class="text-md lg:text-xl font-light text-gray-800 mb-8">Mit Tailwind erstellen Sie Webseiten mit wunderschöne Webdesign in kürzester Zeit. Lernen Sie TailwindCSS jetzt kennen.</p>

Wie man am Resultat erkennen kann, konnten wir durch Nutzung weniger Klassen ziemlich schnell einen gut aussehenden Beschreibungsabschnitt erzeugen.

Anmeldeformular hinzufügen

Jetzt müssen wir nur noch ein Anmeldeformular erstellen, um die Hero-Sektion fertigzustellen. Wir verlangen vom Benutzer die Angabe seines vollständigen Namens und seiner E-Mail-Adresse.

Fügen Sie das folgende HTML-Markup in das zweite <div>-Wrapper-Element des Abschnitts ein:

      
<form action="#" class="bg-gray-100 shadow-sm rounded-md p-8">
    <div class="mb-6">
        <label for="name" class="mb-3 block text-gray-700">Vollständiger Name:</label>
        <input type="text" id="name" class="bg-white rounded-md border border-gray-200 p-3 focus:outline-none w-full" placeholder="Max Mustermann" required>
    </div>
    <div class="mb-6">
        <label for="email" class="mb-3 block text-gray-700">E-Mailadresse:</label>
        <input type="email" id="email" class="bg-white rounded-md border border-gray-200 p-3 focus:outline-none w-full" placeholder="max@seo-lausitz.de" required>
    </div>
    <button type="submit" class="py-3 px-12 bg-green-300 hover:bg-green-400 mr-5 rounded-md text-white text-lg focus:outline-none w-full">Informationen anfordern</button>
</form>

Wieder haben wir die Standard-Klassen optimal verwendet um die Stileigenschaften für die neuen Elemente zu setzen. Hier eine kurze Aufschlüsselung der neuen Klassen:

focus:outline-none – entfernt den Standardrahmen des Browsers, wenn das Feld ausgewählt ist
border – fügt dem Element eine Rahmenbreite von 1px hinzu
border-gray-200 – macht die Rahmenfarbe zu einem helleren Grauton
bg-white – fügt dem Element einen weißen Hintergrund hinzu

Geschafft! Jetzt haben Sie eine Seite mit einer responsiven Navigationsleiste und einer Hero-Sektion inklusive einem Anmeldeformular mit Tailwind CSS fertiggestellt. In den nächsten Abschnitten dieses Tutorials befassen wir uns mit der Anpassung des Projekts mithilfe der Konfigurationsdatei. Weiterhin beschäftigen wir uns mit der Reduktion der endgültigen CSS-Dateigröße durch Bereinigen ungenutzter CSS-Klassen.

Schriftarten und Farben anpassen. Zusätzliche Klassen durch Konfigurationsdatei hinzufügen

Auch wenn die Standardklassen von Tailwind CSS eine Vielzahl von Gestaltungsoptionen bieten, müssen Sie wahrscheinlich Eigenschaften wie Schriftart, Farben, Größen, Abstände, Containerbreite und vieles mehr anpassen. Dies ist z.B. bei Vorgaben durch ein Corporate Design der Fall.

Um die Basisschrift Ihres Projekts zu ändern, müssen Sie zuerst die Schriftart in Ihrem Projekt verfügbar machen. Im Tutorial verwenden wir die OpenSans-Schriftart von Google Fonts, aber Sie können je nach Ihren Vorlieben oder Projektanforderungen eine andere auswählen. Fügen Sie die Schriftart in Ihrem <head>-Tag in Ihre index.html-Datei ein:

   
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

Danach müssen wir die Standard-Werte der tailwinding.config.js anpassen:

  
module.exports = {
    purge: [],
    theme: {
        fontFamily: {
        sans: ['Open+Sans', 'sans-serif'],
        display: ['Open+Sans', 'sans-serif'],
        body: ['Open+Sans', 'sans-serif']
        },
        extend: {}
    },
    variants: {},
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ]
}

Wenn Sie den folgenden Befehl in Ihrem Terminal ausführen, verarbeitet es Ihre Konfigurations- und main.css-Datei und aktualisiert die von Ihnen angegebene Schriftfamilie:


npx tailwindcss build -i main.css -o public/styles.css

Wenn Sie die Hauptseite aktualisieren, sehen Sie, dass die Standard-Schriftart geändert wurde.

Die meisten Projekte stellen bestimmte Anforderungen an die Branding-Farben, was bedeutet, dass die von Tailwind CSS bereitgestellten Standardfarben für Ihre Anforderungen möglicherweise nicht ausreichen. In diesem Fall ist es am besten, die Extend-Methode zu verwenden, die von der Tailwind-Konfigurationsdatei bereitgestellt wird.

Gehen wir zum Beispiel davon aus, Sie haben zwei Farben Ihrer Marke und Sie müssen diese nun mit den Tailwind-Klassen verwenden können. Dafür muss nur die tailwind.config.js noch einmal bearbeitet werden. Den extend-Bereich erweitern wir folgendermaßen:

    
extend: {
    colors: {
        primary: '#8bc53e',
        secondary: '#1e69de'
    }
}

Starten wir den den Build-Prozess erneut:


npx tailwindcss build -i main.css -o public/styles.css

Nun werden die neu gesetzten Farben überall zur Verfügung stehen. Ein Beispiel für eine Verwendung wäre dann text-primary, border-primary oder bg-primary.

Durch das Hinzufügen von Eigenschaften innerhalb des Erweiterungsschlüssels des Hauptobjekts wird der aktuelle Satz von Klassen nicht überschrieben! Der Klassensatz wird erweitert. Das vorherige Beispiel zum Ändern der Schriftart ändert tatsächlich die Eigenschaften der von Tailwind verwendeten Standardklassen.

Reduzieren der Ladezeit und der Dateigröße, indem nicht verwendete Klassen aus dem CSS entfernt werden

Einer der Nachteile, auf die Sie bei der Verwendung von Tailwind CSS anfangs möglicherweise stoßen können, ist die enorme Größe der endgültigen CSS-Datei. Der Grund dafür ist, dass Tailwind eine breite Palette von Klassen enthält, die in Ihrem Projekt möglicherweise niemals verwendet werden.

Die gute Nachricht ist, dass Sie die Dateigröße ganz einfach reduzieren können, indem Sie die nicht verwendeten CSS-Klassen entfernen. Hierzu gibt es eine spezielle Bereinigungsfunktion, welche über die tailwind.config.js aktiviert werden kann.

Fügen Sie Ihrer Konfigurationsdatei die folgende Codezeile hinzu:

    
purge: {
    enabled: true,
    content: [
        './**/*.html'
    ]
},

Wenn Sie den Build-Prozess ausführen, werden Sie feststellen, das die styles.css nun viel kleiner ist. Statt der 3,9MB haben wir nun nicht einmal mehr 20KB. Was passiert? Tailwind geht durch oben gezeigten Code alle HTML-Dateien durch und hinterlegt im Build-Prozess nur die tatsächlich genutzten Klassen.

Fazit

Ich hoffe, dieses Tutorial hat Ihnen geholfen, ein gutes Verständnis davon zu bekommen, was Tailwind CSS ist, wie es funktioniert und welche Vorteile es gegenüber anderen CSS-Frameworks haben kann, wenn es darum geht, Benutzeroberflächen schnell und effizient zu erstellen.

Sie haben gelernt, wie Sie Tailwind CSS mit einem Paketmanager installieren. Sie haben die grundlegenden Tailwind CSS-Klassen kennen gelernt. Weiterhin haben Sie eine kleine Webseite mit einer Navigationsleiste und einer Hero-Sektion erzeugt. Zum Abschluss haben Sie die Konfigurationsdatei zu Ihrem Vorteil verwendet indem Sie die endgültige Dateigröße Ihrer CSS-Datei reduziert haben.

Ich bedanke mich für Ihr Interesse und wünsche Ihnen viel Spaß beim weiteren Experimentieren!

Tailwind CSS – Das Tutorial zum CSS Framework