Lernen Sie Tailwind CSS – Erstellen Sie moderne, responsive Webseiten von Grund auf.

Was ist Tailwind CSS?

Tailwind CSS Tailwind ist ein CSS-Framework, das Funktionalität in den Vordergrund stellt. Es hilft Entwicklern dabei, benutzerdefinierte Benutzeroberflächen schnell zu erstellen, indem es eine große Anzahl kombinierbarer, praktischer Klassen („Utility Classes“) bietet. Im Gegensatz zu Frameworks wie Bootstrap, die vorgefertigte Komponenten wie Buttons oder Karten bereitstellen, bietet Tailwind keine fertigen Komponenten an. Stattdessen stellt es eine Reihe von grundlegenden, atomaren Klassen zur Verfügung, mit denen Entwickler ihre eigenen Elemente selbst gestalten können. .text-center、.p-4、.bg-blue-500Entwickler “bauen” die gewünschten Styles auf, indem sie diese Klassen direkt auf HTML-Elemente schreiben.

Der Kernvorteil dieser Methode liegt darin, dass sie die Entwicklungseffizienz erheblich steigert und die in herkömmlichen CSS-Systemen häufig auftretenden Probleme mit Namenskonflikten sowie Stilüberschreibungen beseitigt. Sie müssen sich nicht mehr den Kopf über die Wahl von Klassennamen zerbrechen und auch nicht zwischen mehreren CSS-Dateien hin- und herwechseln. Da die Styles direkt in das HTML eingebettet sind, verbessert sich zudem die Wartbarkeit des Projekts – Sie können auf einen Blick erkennen, wie ein Element letztendlich dargestellt wird.Tailwind CSS Standardmäßig sind responsives Design, Zustandsvarianten (z. B. bei Hover-Effekten oder Fokussierung) sowie die Unterstützung für Dunkelmodus integriert, was es zu einem hervorragenden Werkzeug macht, moderne Webseiten zu erstellen.

Wie Sie mit Tailwind CSS beginnen können

anfangen zu benutzen Tailwind CSS Es gibt verschiedene Möglichkeiten, wobei die empfohlene Methode die Installation und Konfiguration mithilfe des offiziellen CLI-Tools ist. Diese Methode bietet die größte Flexibilität sowie die beste Kontrolle über den Build-Prozess.

Empfohlene Lektüre Tailwind CSS – Ein praktischer Leitfaden von der Grundlage bis zur Meisterschaft sowie die besten Praktiken。

Installation mithilfe eines CLI-Tools

Zuerst müssen Sie das Projekt initialisieren. Tailwind CSSEs ist die beste Praxis, das CLI-Tool über npm oder yarn zu installieren und anschließend eine Konfigurationsdatei zu erstellen. Führen Sie im Wurzelverzeichnis des Projekts den folgenden Befehl aus:

WordPress.com Website-Baukasten-Assistent

99.999% Verfügbarkeit + regionsübergreifende Disaster Recovery, 24/7 Support, kostenlose AI Build Site beim Kauf eines Blog-Pakets

Kostenloser Domainname für ein Jahr

Besuchen Sie den WordPress.com Website Builder's Assistant →.

UltaHost Website Builder Assistent

900+ kostenlose, anpassbare Vorlagen, um die SEO-Leistung zu erhalten, die Sie benötigen, um Ihre Website für die Suche zu optimieren

Angebot 40%

UltaHost Website Builder Helper → besuchen

npm install -D tailwindcss
npx tailwindcss init

Dies wird in Ihrem Projekt ein Element mit dem Namen „…“ erstellen. tailwind.config.js Die Konfigurationsdatei. Als Nächstes müssen Sie eine Haupt-CSS-Datei erstellen (zum Beispiel…) src/input.css) und verwenden Sie @tailwind Anweisungen zur Einbeziehung der verschiedenen Ebenen von Tailwind.

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Und dann, tailwind.config.js In der Konfigurationsdatei geben Sie den Pfad zu Ihren Template-Dateien an, damit Tailwind diese Dateien scannen und die entsprechende CSS-Datei erzeugen kann.

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

Schließlich führen Sie den CLI-Befehl aus, um die endgültige CSS-Datei zu erstellen.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Dieser Befehl überwacht Änderungen in Ihren Quelldateien und kompiliert die benötigten Hilfsklassen in Echtzeit. ./dist/output.css Im File befindet sich die fertig generierte CSS-Datei. Sie müssen diese einfach in Ihre HTML-Datei einbinden.

Empfohlene Lektüre Tailwind CSS – Das ultimative Einführungstutorial: Von Null aus eine moderne, responsive UI erstellen。

Kernpraktische Klassen und responsives Design

Tailwind CSS Die praktischen Klassen umfassen nahezu alle CSS-Eigenschaften wie Layout, Abstände, Formatierung, Farben, Rahmen und Effekte. Die Namenskonventionen sind intuitiv und einheitlich – beispielsweise werden für Abstände bestimmte Bezeichnungen verwendet… p-{size} Bezeichnet den Innenabstand (Padding).m-{size} Bezieht sich auf den Randabstand („margin“); Breite und Höhe werden ebenfalls verwendet. w-{size} und h-{size}。

Reaktives Design ist eine Stärke von Tailwind. Es verwendet ein „Mobile First“-Brechpunktsystem. Die Standard-Brechpunkte sind:sm(640px)md(768px)lg(1024px)xl(1280px)2xl(1536px). Um Styles für verschiedene Bildschirmgrößen anzuwenden, genügt es, vor die entsprechende Praktikklasse den entsprechenden Breakpoint-Prefix hinzuzufügen.

Beispielsweise erstellt der folgende Code einen Container, der standardmäßig auf mobilen Geräten gestapelt angezeigt wird und auf mittleren und größeren Bildschirmen horizontal angeordnet wird:

Bluehost Website Builder

Bietet AI-Website-Erstellungstool, 24/7 Live-Chat & Telefon-Support, kostenloser Domain-Name für 1 Jahr, kostenloses CDN, 99.99% Betriebszeit SLA

Bluehost besuchen

<div class="flex flex-col md:flex-row">
  <div class="p-4 bg-blue-100 md:w-1/2">Der Inhalt auf der linken Seite</div>
  <div class="p-4 bg-green-100 md:w-1/2">Der Inhalt auf der rechten Seite</div>
</div>

In diesem Beispiel…flex-col Es handelt sich um das Standarddesign (für mobile Geräte).md:flex-row bedeutet „zu zeigen“ oder „anzugeben“. md Ab dem Breakpoint und den darüberliegenden Bildschirmen ändert sich die Ausrichtung der elastischen Container in horizontale (reihenförmig). Ebenso wird die Breite der Container angepasst. md:w-1/2 Es funktioniert nur auf Bildschirmen mit einer Größe von mittlerer oder größerer Größe.

Benutzerdefinierte Themes und Plugins

auch wenn Tailwind CSS Es wurde ein hochwertiges Standarddesignsystem bereitgestellt, jedoch sind benutzerdefinierte Themen unerlässlich, um die Markenkonzeption einheitlich zu wahren. Dies erfolgt hauptsächlich durch Anpassungen… tailwind.config.js Die Datei enthält theme Ein Teil davon wird durch die Umsetzung erreicht.

Erweitern der Standardkonfiguration

Sie können… theme.extend Ein neuer Wert wird dem Objekt hinzugefügt – dieser übernimmt nicht den Standardwert, sondern erweitert das Objekt. Zum Beispiel kann man dabei eine benutzerdefinierte Farbe, eine bestimmte Schriftart oder einen bestimmten Abstand festlegen.

Empfohlene Lektüre Lernen Sie Tailwind CSS – Erstellen Sie moderne, responsive Websites von Grund auf.。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1d4ed8',
        'brand-secondary': '#7e22ce',
      },
      fontFamily: {
        'sans': ['Inter var', 'system-ui', 'sans-serif'],
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

Nach der Anpassung können Sie diese Funktion in HTML verwenden. text-brand-primary、font-sans und p-84 Das ist also eine solche Klasse.

Verwenden Sie offizielle sowie Community-Plugins.

Tailwind CSS Das Plugin-System ermöglicht es Ihnen, eigene nützliche Klassen zu erstellen. Die Entwickler haben einige sehr praktische Plugins bereitgestellt, zum Beispiel… @tailwindcss/forms(Dient zur Verzierung von Formularelementen)@tailwindcss/typography(Dient der schönen Formatierung unkontrollierbaren HTML-Inhalts.) Nach der Installation genügt es, die Einstellungen in der Konfigurationsdatei anzupassen. plugins Sie können es einfach in das Array einfügen.

\nhosting.com

Kostenloses SSL, Cloudflare CDN, WAF, 40+ globale Serverräume zur Auswahl, niedrigere Latenz in Ihrer Nähe, 24/7/365 Service-Support, Sie können jetzt bis zu 67% sparen, Unterstützung für AI-Builds und SEO-Optimierung!

Besuchen Sie hosting.com

npm install @tailwindcss/typography

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
    // ... 其他插件
  ],
}

Danach können Sie diesen Mechanismus auf beliebige Container anwenden. prose Klassen, die es ermöglichen, dass der HTML-Inhalt darin automatisch eine ansprechende Formatierung erhält.

Erstellen komplexer Komponenten

Nachdem Sie die Grundklassen beherrscht haben, können Sie mit dem Bau komplexer, wiederverwendbarer Komponenten beginnen. Obwohl Tailwind die direkte Kombination von Styles in HTML fördert, ist es für in großen Projekten häufig genutzte Komponenten sinnvoller, spezielle Bibliotheken oder Frameworks zu verwenden. @apply Es ist auch eine gute Praxis, in CSS Anweisungen zu verwenden, um gemeinsame Styles zu extrahieren.

Zum Beispiel können Sie einen benutzerdefinierten Button-Stil definieren:

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-brand-primary text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-150 ease-in-out;
}

Danach kann man diesen Klassennamen direkt in HTML verwenden:

<button class="btn-primary">点击我</button>

Diese Methode vereint die Flexibilität praktischer Ansätze mit der Wartbarkeit traditionellen CSS. In Projekten, die auf JavaScript-Frameworks wie React oder Vue basieren, werden die entsprechenden Styles in der Regel direkt in die Komponententemplates geschrieben, wodurch Styles, Struktur und Logik eng miteinander verknüpft werden.

Zusammenfassungen

Tailwind CSS Durch seinen funktionsorientierten und praxisnahen Ansatz hat Tailwind die Art und Weise, wie Frontend-Entwickler ihre Styles erstellen, grundlegend verändert. Es bietet von Grund auf alle notwendigen Werkzeuge, um moderne, responsive Webseiten zu erstellen. Gleichzeitig sorgt die intuitive Benennung der Elemente, ein leistungsfähiges Responsive-System sowie eine hochgradig anpassbare Konfiguration für eine effiziente Entwicklung und eine konsistente Gestaltung. Egal ob es um die schnelle Erstellung von Prototypen oder die Entwicklung umfangreicher, produktionsreifer Anwendungen geht – Tailwind verbessert den Arbeitsablauf erheblich. Wenn Sie die Kernkonzepte, die responsive Prefixes, die Themenkonfiguration sowie die Methoden zur Erstellung von Komponenten beherrschen, können Sie effizient einzigartige und ansprechende Benutzeroberflächen kreieren.

FAQ Häufig gestellte Fragen

Werden die von Tailwind CSS generierten CSS-Dateien sehr groß?

Nein. In einer Produktionsumgebung…Tailwind CSS Verwenden Sie die PurgeCSS-Technologie (die inzwischen integriert und als “Content Scanning” bezeichnet wird). Sie scannnt alle in der Konfigurationsdatei angegebenen Template-Dateien (wie HTML, JSX, Vue) und packt nur die tatsächlich verwendeten Styles in die endgültige CSS-Datei. Dadurch wird die generierte CSS-Datei sehr kompakt – sie umfasst in der Regel nur ein paar KB bis maximal ein paar Dutzend KB.

Wie kann man in Teamprojekten die Einheitlichkeit der Styles aufrechterhalten?

Tailwind CSS Es fördert durch die Bereitstellung eines eingeschränkten Designsystems (z. B. feste Farbpaletten, Abstände und Proportionen) die Konsistenz. Das Team kann durch die gemeinsame Nutzung sowie die strikte Befolgung dieses sorgfältig erstellten Systems zu einheitlichen Ergebnissen kommen. tailwind.config.js Konfigurationsdateien werden verwendet, um eine Einheitlichkeit zu gewährleisten. Darüber hinaus können sie auch kombiniert werden. @apply Mithilfe von Anweisungen oder Komponentensystemen von JavaScript-Frameworks kann eine bibliothekarische Sammlung von wiederverwendbaren, stilistisch einheitlichen UI-Komponenten erstellt werden.

Wie unterscheidet sich Tailwind CSS von herkömmlichen CSS-in-JS-Lösungen (wie z. B. styled-components)?

Die Ziele beider sind unterschiedlich, aber sie können sich gegenseitig ergänzen.Tailwind CSS Hauptsächlich wird in der HTML-/Template-Schicht gearbeitet, wobei Stile durch Kombination von Klassennamen definiert werden. Der Fokus liegt dabei auf Praktikabilität und Entwicklungsgeschwindigkeit. CSS-in-JS hingegen generiert Stile dynamisch während der Ausführung von JavaScript, eignet sich besonders gut für hochdynamische, statusabhängige Anwendungen und bietet eine perfekte Isolierung der Styles. In praktischen Projekten können Entwickler je nach Bedarf zwischen diesen Ansätzen wählen – beispielsweise können mit Tailwind grundlegende Layouts und allgemeine Styles gestaltet werden, während komplexe, dynamische Styles mit CSS-in-JS realisiert werden.

Braucht man eine gute Grundlage in CSS, um Tailwind CSS zu lernen?

Es sind grundlegende Kenntnisse in CSS erforderlich, aber es ist nicht notwendig, ein Experte zu werden. Tatsächlich…Tailwind CSS Die Klassennamen stimmen perfekt mit den CSS-Attributen überein (z. B.) flex, justify-center, text-whiteDer Prozess des Lernens von Tailwind ist gleichzeitig auch ein Lernen der besten Praktiken im Umgang mit CSS. Für Anfänger kann Tailwind eine sehr nützliche “Stütze” sein, die dabei hilft, die häufig auftretenden Fehler zu vermeiden, die beim direkten Schreiben komplexer CSS-Code entstehen. Mit zunehmender Erfahrung mit den Tailwind-Klassen wird auch das Verständnis für die zugrundeliegenden CSS-Prinzipien tiefer.