{"id":55866,"date":"2024-04-19T07:00:00","date_gmt":"2024-04-19T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=55866"},"modified":"2025-11-17T09:39:30","modified_gmt":"2025-11-17T17:39:30","slug":"tailwind-css","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/tailwind-css\/","title":{"rendered":"Ihr komplettes Tailwind CSS-Handbuch"},"content":{"rendered":"\n

CSS<\/a>-Frameworks haben die Art und Weise, wie Entwickler die Webentwicklung angehen, ver\u00e4ndert, indem sie vorgefertigte Komponenten und Stile bereitstellen. Viele Frameworks kommen jedoch mit festgelegten Designs und aufgebl\u00e4hten Stylesheets, die die Anpassung einschr\u00e4nken.<\/p>\n\n\n\n

Tailwind CSS verfolgt einen anderen Ansatz. Als CSS-Framework, das auf Utility-First basiert, bietet es niedrigstufige Utility-Klassen, die es Entwicklern erm\u00f6glichen, benutzerdefinierte Designs zu erstellen, ohne durch vordefinierte Komponenten eingeschr\u00e4nkt zu sein.<\/p>\n\n\n\n

Mit \u00fcber 675.375 Websites<\/a>, die Tailwind CSS verwenden, und \u00fcber 8,61 Millionen abh\u00e4ngigen Repositories<\/a>, ist Tailwind mehr als nur ein weiteres CSS-Framework geworden.<\/p>\n\n\n\n

In diesem Artikel werden wir die Konzepte von Tailwind CSS, den Einrichtungsprozess und die praktische Anwendung durchgehen, damit Sie anfangen k\u00f6nnen, Ihre sch\u00f6nen benutzerdefinierten Benutzeroberfl\u00e4chen zu bauen, ohne CSS lernen zu m\u00fcssen.<\/p>\n\n\n\n

Lasst uns anfangen!<\/p>\n\n\n\n

Was ist Tailwind CSS?<\/h2>\n\n\n\n

Tailwind CSS ist ein hochgradig anpassbares, niedrigstufiges CSS-Framework<\/a>, das einen Satz von Utility-Klassen bietet, um schnell benutzerdefinierte Benutzeroberfl\u00e4chen zu erstellen. Es wurde erstmals 2017 von Adam Wathan entwickelt und ver\u00f6ffentlicht.<\/p>\n\n\n\n

Seitdem hat Tailwind eine aufsteigende Entwicklung<\/a> bei der Erstellung von Websites mit der Tailwind-Bibliothek erlebt.<\/p>\n\n\n\n

\""Tailwind-Nutzungsstatistiken"<\/figure>\n\n\n\n

Obwohl das Wachstum laut den BuiltWith-Diagrammen derzeit zu verlangsamen scheint, wird das Framework regelm\u00e4\u00dfig mit neuen Funktionen, Klassen und mehr aktualisiert.<\/p>\n\n\n\n

Laut BuiltWiths Technologie-Stack-Daten<\/a>, verwenden allein in den USA \u00fcber 100.000 Websites Tailwind zur Erstellung ihrer Benutzeroberfl\u00e4chen, zusammen mit dem Vereinigten K\u00f6nigreich, Indonesien, Deutschland und anderen L\u00e4ndern, die zu den Top 10 Nutzern dieser Bibliothek geh\u00f6ren.<\/p>\n\n\n\n

\"Statistik<\/figure>\n\n\n\n

Die Kernphilosophie hinter Tailwind CSS besteht darin, Entwicklern einen Satz von Bausteinen anstatt vorgefertigter Komponenten zur Verf\u00fcgung zu stellen. Diese Bausteine sind kleine, zweckgebundene Utility-Klassen, die kombiniert werden k\u00f6nnen, um komplexe und responsive Layouts zu erstellen.<\/p>\n\n\n\n

Dieser Ansatz erm\u00f6glicht gr\u00f6\u00dfere Flexibilit\u00e4t und Kontrolle \u00fcber das Design, da Sie jeden Aspekt Ihrer Benutzeroberfl\u00e4che anpassen k\u00f6nnen, ohne durch die vorgefertigten Stile des Frameworks eingeschr\u00e4nkt zu sein.<\/p>\n\n\n\n

Was macht Tailwind CSS anders?<\/h2>\n\n\n\n

Traditionell schreiben Entwickler beim Arbeiten mit CSS benutzerdefinierte Klassen in separaten Stylesheets, um ihre HTML-Elemente zu gestalten. Dieser Ansatz kann zu gro\u00dfen CSS<\/a>-Dateien f\u00fchren und das Pflegen und Aktualisieren von Stilen \u00fcber ein Projekt hinweg erschweren.<\/p>\n\n\n\n

Tailwind bietet einen umfassenden Satz an Utility-Klassen, die direkt auf HTML-Elemente angewendet werden k\u00f6nnen. Diese Klassen sind hochgradig komponierbar, was Entwicklern erm\u00f6glicht, komplexe, benutzerdefinierte Designs zu erstellen, ohne eine einzige Zeile benutzerdefinierten CSS zu schreiben.<\/p>\n\n\n\n

Beispielsweise k\u00f6nnen Sie anstatt einer benutzerdefinierten CSS-Klasse zum Stylen eines Buttons, vordefinierte Klassen von Tailwind wie folgt verwenden:<\/p>\n\n\n\n

<button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">\n  Knopf\n<\/button><\/code><\/pre>\n\n\n\n
Dieser Ansatz hat mehrere Vorteile:<\/p>\n\n\n\n
    \n
  1. Schnellere Entwicklung<\/strong>: Die vordefinierten Klassen helfen Entwicklern dabei, schnell Designs zu erstellen und zu iterieren, ohne st\u00e4ndig zwischen HTML<\/a> und CSS-Dateien wechseln zu m\u00fcssen.<\/li>\n\n\n\n
  2. Konsistente Gestaltung<\/strong>: Tailwind bietet einen standardisierten Satz an Klassen, der hilft, die Konsistenz im Design \u00fcber ein Projekt hinweg zu wahren.<\/li>\n\n\n\n
  3. Kleinere CSS-Dateien<\/strong>: Da Stile direkt im HTML angewendet werden, ist keine Notwendigkeit f\u00fcr gro\u00dfe, benutzerdefinierte CSS-Dateien.<\/li>\n\n\n\n
  4. Einfachere Wartung<\/strong>: Mit im HTML definierten Stilen ist es einfacher zu sehen, wie \u00c4nderungen ein spezifisches Element beeinflussen, ohne durch separate CSS-Dateien zu suchen.<\/li>\n\n\n\n
  5. Bessere Leistung<\/strong>: Viele moderne Styling-Systeme wie Emotion<\/a> oder Styled Components<\/a> verlassen sich auf Javascript (normalerweise zur Laufzeit, langsamere Leistung), um Ihr CSS zu rendern. Tailwind ist letztendlich nur CSS.<\/li>\n<\/ol>\n\n\n\n
    \n
    <\/p>\nTailwind hat mich zu einem kompletten Stack-Entwickler gemacht ?\u201d<\/em>
    \u2014 <\/em>    Boris Lepikhin<\/a><\/cite><\/blockquote>\n\n\n\n
    Erste Schritte mit Tailwind CSS<\/h2>\n\n\n\n
    Bevor wir zu Beispielen \u00fcbergehen, richten wir ein grundlegendes Projekt mit Tailwind CSS ein. Wir gehen davon aus, dass Sie etwas Vertrautheit mit HTML und CSS haben. Au\u00dferdem m\u00fcssen Sie npm auf Ihrem System installiert haben<\/a>. Sobald Sie fertig sind, k\u00f6nnen Sie loslegen!<\/p>\n\n\n\n
    Erstellen Sie ein neues Verzeichnis f\u00fcr Ihr Projekt und navigieren Sie hinein:<\/strong><\/p>\n\n\n\n
    mkdir mein-tailwind-projekt\ncd mein-tailwind-projekt<\/code><\/pre>\n\n\n\n
    Initialisiere ein neues npm-Projekt und installiere Tailwind CSS:<\/strong><\/p>\n\n\n\n
    npm init -y\nnpm install -D tailwindcss<\/code><\/pre>\n\n\n\n
    Erstellen Sie eine tailwind.config.js-Datei:<\/strong><\/p>\n\n\n\n
    npx tailwindcss init<\/code><\/pre>\n\n\n\n
    Erstellen Sie eine input.css-Datei und f\u00fcgen Sie Folgendes hinzu:<\/strong><\/p>\n\n\n\n
    @tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
    Aktualisieren Sie Ihre tailwind.config.js-Datei, um Ihre input.css zu verarbeiten:<\/strong><\/p>\n\n\n\n
    module.exports = {\n  content: [\".\/src\/**\/*.{html,js}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
    Erstellen Sie eine index.html-Datei in einem src-Verzeichnis und f\u00fcgen Sie Folgendes hinzu:<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <link href=\"\/dist\/output.css\" rel=\"stylesheet\">\n  <\/head>\n  <body>\n    <h1 class=\"text-3xl font-bold text-center mt-4\">Willkommen bei Tailwind CSS!<\/h1>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Erstellen Sie Ihr CSS:<\/strong><\/p>\n\n\n\n
    npx tailwindcss -i .\/src\/input.css -o .\/src\/output.css --watch<\/code><\/pre>\n\n\n\n
    Wenn Sie jetzt index.html in Ihrem Browser \u00f6ffnen, sollten Sie eine gro\u00dfe, fett gedruckte \u00dcberschrift sehen, die sagt Willkommen bei Tailwind CSS!<\/strong><\/p>\n\n\n\n
    \""Willkommen<\/figure>\n\n\n\n
    Herzlichen Gl\u00fcckwunsch, Sie haben Ihr erstes Tailwind-Projekt eingerichtet!<\/p>\n\n\n\n
    Tailwind CSS Hilfsklassen<\/h2>\n\n\n\n
    Tailwind CSS bietet eine breite Palette von Utility-Klassen, die verschiedene Aspekte des Stylings abdecken, wie Layout, Abstand, Typografie, Farben und mehr. Diese Klassen folgen einer Benennungskonvention, die es intuitiv macht, ihren Zweck zu verstehen.<\/p>\n\n\n\n
    <\/p>\n\n\n\n
    Lassen Sie uns einige h\u00e4ufig verwendete Utility-Klassen in Tailwind CSS<\/a> erkunden.<\/p>\n\n\n\n
    Tailwind Layout-Klassen<\/h3>\n\n\n\n