Tutorial zu Tailwind CSS: Der ultimative praktische Leitfaden, vom Anfänger bis zum Experten

Was ist Tailwind CSS?

Tailwind CSS ist ein Utility-First-CSS-Framework, das eine Reihe von niedriggradigen, einzeln verwendbaren CSS-Klassen bietet, die direkt in HTML (oder JSX, Vue-Vorlagen usw.) kombiniert werden können, um schnell benutzerdefinierte Benutzeroberflächen zu erstellen. Im Gegensatz zu Frameworks wie Bootstrap, die vorgefertigte Komponenten (wie Schaltflächen, Karten) bereitstellen, bietet Tailwind CSS keine fertigen Komponenten, sondern eine Reihe grundlegender Werkzeuge, die für die Erstellung beliebiger Designs erforderlich sind.

Diese auf Zweckmäßigkeit ausgerichtete Methode bedeutet, dass Entwickler keine benutzerdefinierten CSS-Codes mehr für Komponenten schreiben müssen und auch nicht mehr häufig zwischen HTML- und CSS-Dateien wechseln müssen. Durch die direkte Anwendung einer Reihe von Elementen wie < in HTML wird dies erreicht. text-blue-600、p-4、bg-gray-100 Durch die Verwendung von CSS-Klassen können Sie die Textfarbe, den inneren Abstand und die Hintergrundfarbe festlegen. Dies erhöht die Entwicklungseffizienz erheblich und ermöglicht eine engere Verknüpfung von Stil und Struktur, wodurch die Größe und Komplexität von CSS-Dateien reduziert werden.

Die zentrale Designphilosophie von Tailwind CSS lautet “Einschränkungen schaffen Freiheit”. Es gewährleistet die Konsistenz des Projektdesigns durch ein sorgfältig konzipiertes Designsystem mit Skalierungen für Abstände, Farben, Schriftgrößen usw., ohne dabei an Flexibilität einzubüßen. Entwickler können auf der Grundlage dieser vordefinierten Einschränkungen einzigartige Designs erstellen, ohne sich um eine unkontrollierbare Verbreitung von Stilen sorgen zu müssen.

Wie Sie mit Tailwind CSS beginnen können

Es gibt verschiedene Möglichkeiten, Tailwind CSS in Ihr Projekt zu integrieren. Die empfohlene Methode besteht darin, es als PostCSS-Plugin zu installieren, um die Optimierungsfunktionen von Tailwind optimal zu nutzen.

Installieren Sie die Bibliothek über npm oder yarn.

Zunächst initialisieren Sie das Projekt über den Paketmanager und installieren Tailwind CSS sowie dessen Abhängigkeiten. Der Hauptbefehl lautet: tailwindcss、postcss und autoprefixer。

npm install -D tailwindcss postcss autoprefixer

Nachdem die Installation abgeschlossen ist, führen Sie den folgenden Befehl aus, um Konfigurationsdateien für Tailwind CSS und PostCSS zu generieren. Führen Sie Folgendes aus: npx tailwindcss init -p Es wird gleichzeitig erstellt tailwind.config.js und postcss.config.js Dokumente.

npx tailwindcss init -p

Konfigurieren Sie den Pfad zur Vorlagendatei.

Bei der Erzeugung von tailwind.config.js In der Datei müssen Sie die Konfiguration vornehmen. content Felder, um Tailwind mitzuteilen, welche Dateien nach Klassennamen durchsucht werden sollen. Dazu gehören normalerweise Ihre HTML-, JavaScript-, JSX- oder Vue-Dateien. Dies ist sehr wichtig, da Tailwind einen Mechanismus namens “PurgeCSS” (in der Produktionsversion) verwendet, um alle nicht verwendeten CSS-Dateien zu entfernen und so minimale Stylesheets zu erzeugen.

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

Importiere Stilanweisungen

In Ihrer Haupt-CSS-Datei (z. B. src/styles.css oder src/index.cssIn…) wird verwendet. @tailwind Anweisungen zur Einbettung der Kernstyles von Tailwind.

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

Anschließend fügen Sie diese CSS-Datei in die Einstiegsdatei Ihres Projekts ein. Nachdem Sie die obigen Schritte durchgeführt haben, können Sie in HTML mit den praktischen Klassen von Tailwind beginnen.

Kernpraktische Klassen und häufig verwendete Muster

Die Klassennamen von Tailwind CSS sind hochgradig semantisch und vorhersehbar und folgen einem einfachen Namensmuster: Eigenschaft-Wert (oder Eigenschaft-Breakpoint-Wert).

Layout und Abstände

Dies ist die am häufigsten verwendete Gruppe von Klassen. Beispielsweise,flex Zur Einrichtung eines elastischen Kastenlayouts,p-4 Ausdrucken padding: 1remDie Ränder werden verwendet, um den Text auf einer Seite auszurichten. m-*Der innere Randabstand wird verwendet. p-*Zahlen entsprechen normalerweise einem proportional skalierten Abstandssystem (z. B. 0, 1, 2, 4, 6).

<div class="flex justify-between items-center p-4">
  <div class="ml-2">Die linke Seite</div>
  <div class="mr-2">Die rechte Seite</div>
</div>

Farben und Hintergründe

Sie können die Textfarbe, die Hintergrundfarbe und die Rahmenfarbe ganz einfach einstellen. Das Farbsystem bietet eine umfangreiche Palette an Farben, wie zum Beispiel text-blue-500、bg-gray-100、border-red-300Die Zahl ist größer, die Farbe ist normalerweise dunkler (zum Beispiel,blue-100 Es ist sehr flach.blue-900 Das ist ziemlich tief.

reaktionsfähiges Design

Tailwind verfolgt eine mobil-first-Strategie. Alle praktischen Klassen sind standardmäßig für mobile Geräte optimiert. Um Styles für größere Bildschirme hinzuzufügen, müssen Sie vor dem Klassennamen einen Breakpoint-Präfix einfügen, z. B. md:、lg:Das macht es äußerst einfach, responsive Oberflächen zu erstellen.

<div class="text-base md:text-lg lg:text-xl">
  Dieser Text wird auf einem Handy in normaler Größe angezeigt, auf einem Tablet wird er größer und auf einem Desktop noch größer.
</div>

\nZustände wie Hover, Fokus usw.

Durch das Hinzufügen von Statuspräfixen können Sie für verschiedene Zustände eines Elements Stile festlegen. Beispielsweise können Siehover:bg-blue-600 Die Hintergrundfarbe ändert sich, wenn der Mauszeiger darüber geführt wird.focus:ring-2 Einen ringförmigen Rahmen hinzufügen, wenn das Element den Fokus erhält.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  悬停有效果的按钮
</button>

Erweiterte Techniken und benutzerdefinierte Konfigurationen

Nachdem Sie die Grundlagen beherrschen, können Sie das Potenzial von Tailwind durch einige fortgeschrittene Techniken und benutzerdefinierte Konfigurationen voll ausschöpfen.

Extrahieren der Komponentenklassen

Obwohl die Priorität der Benutzerfreundlichkeit der zentrale Gedanke ist, können Sie zur Vermeidung von langen Klassenlisten in HTML Folgendes verwenden: @apply Die Anweisung extrahiert und wiederverwendet häufig verwendete Stilkombinationen in CSS, um Ihre eigenen “Komponentenklassen” zu erstellen.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;
}

Danach muss man in HTML einfach nur… class="btn-primary" Das genügt.

Anpassbares Designsystem

Alle Standardwerte von Tailwind sind konfigurierbar. Durch Änderungen können Sie sie anpassen. tailwind.config.js Sie können die Farben, Schriftarten, Abstände, Trennlinien usw. der Datei anpassen, sodass sie vollständig mit Ihrer Marke oder Ihren Designrichtlinien übereinstimmt.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
      }
    },
  },
}

Nach der Definition können Sie es verwenden. text-brand-blue oder p-84 So etwas wie eine benutzerdefinierte Klasse also.

Die Verwendung des JIT-Modus

Ab Tailwind CSS v2.1 wurde eine Just-in-Time-Engine (JIT) eingeführt. Diese erzeugt das benötigte CSS dynamisch, während Sie Ihre Vorlagen schreiben, anstatt vorab eine riesige CSS-Datei mit allen möglichen Klassen zu generieren. Dies führt zu einer erheblichen Leistungssteigerung und unterstützt einige Funktionen, die im traditionellen Modus nicht möglich sind, wie z. B. Varianten mit beliebigen Werten.

Um den JIT-Modus zu aktivieren, müssen Sie lediglich in tailwind.config.js Einstellungen in der Mitte mode: 'jit'。

// tailwind.config.js
module.exports = {
  mode: 'jit',
  // ... 其他配置
}

Nach der Aktivierung können Sie sogar Dinge wie w-[200px] oder top-[-10px] Solche beliebigen Wertklassen bieten eine große Flexibilität für die Entwicklung.

Zusammenfassungen

Tailwind CSS hat die Art und Weise, wie Frontend-Entwickler Stylesheets schreiben, durch seine einzigartige Methodik, die den Fokus auf Praktikabilität legt, grundlegend verändert. Es verlagert Styling-Entscheidungen von CSS-Dateien auf HTML-Tags und ermöglicht so eine effiziente, konsistente und hochgradig anpassbare Oberflächenentwicklung durch die Kombination vieler atomarer Klassen mit einzelnen Funktionen. Von der einfachen Installation und Konfiguration über zentrale Layout-, Farb-, responsive und Statusklassen bis hin zu erweiterten benutzerdefinierten Einstellungen, Komponentenextraktion und JIT-Modus bietet Tailwind eine umfassende Palette leistungsstarker und flexibler Tools. Es fördert kreatives Arbeiten innerhalb sorgfältig konzipierter Einschränkungen, gewährleistet Designkonsistenz und bietet Entwicklern gleichzeitig umfassende Freiheit. Es ist ein leistungsstarkes Hilfsmittel für das schnelle Prototyping und die Produktentwicklung moderner Webprojekte.

FAQ Häufig gestellte Fragen

Wird Tailwind CSS dazu führen, dass das HTML-Code-Format aufwendig und unübersichtlich wird?

Tatsächlich fügt die Verwendung von Tailwind CSS einer Menge HTML-Elemente Klassennamen hinzu, was den HTML-Code möglicherweise etwas umständlich erscheinen lässt.

Allerdings ist diese “Bloat” strukturiert und vorhersehbar, und sie verlagert die Komplexität des Styles tatsächlich von CSS auf das leichter zu verwaltende HTML. Noch wichtiger ist, dass dies durch die Konfiguration erreicht wird. content Der Pfad, der von Build-Tools für die Produktion verwendet wird, entfernt alle unbenutzten CSS-Klassen, und die resultierende CSS-Datei ist in der Regel viel kleiner als herkömmlicher handgeschriebener Code oder CSS, das mit Komponentenbibliotheken erstellt wurde. Daher bietet sie sogar einen Leistungsvorteil.

Wie kann man die Standardstile von Tailwind übernehmen oder ändern?

Sie können den Standardstil auf verschiedene Weise überschreiben. Die empfohlene Methode ist, dies in tailwind.config.js Die Datei der theme.extend Teilweise erweitert werden, so dass neue Werte hinzugefügt werden können, ohne das ursprüngliche System zu beeinträchtigen. Wenn Sie einen Themenschlüssel (z. B. Farbe) vollständig ersetzen möchten, tun Sie dies einfach unter theme Und jetzt definieren wir es neu. Außerdem verwenden wir es vor praktischen Klassen. !important Modifikatoren (wie z. B. !text-red-500Sie können auch die Überlappung von Stilen erreichen, indem Sie einen höher spezifischen Selektor in CSS verwenden.

Mit welchen Frontend-Frameworks eignet sich Tailwind CSS am besten zusammenzuenutzen?

Tailwind CSS lässt sich perfekt in fast alle modernen Frontend-Frameworks integrieren. Es unterstützt nativ React, Vue, Angular, Svelte usw. Sie müssen lediglich sicherstellen, dass Sie die Klassennamen in den Vorlagen oder JSX des Frameworks korrekt verwenden, und PostCSS und Tailwind in Ihrem Build-Prozess konfigurieren. Viele Frameworks (wie Next.js, Vite) bieten sogar offizielle Integrationsbeispiele oder Plugins für Tailwind CSS, um den Integrationsprozess noch reibungsloser zu gestalten.

Muss man auf das manuelle Schreiben von CSS verzichten, um Tailwind CSS zu verwenden?

Das ist überhaupt nicht nötig. Tailwind CSS schließt handgeschriebenes CSS nicht aus, sondern ergänzt es. Sie können weiterhin benutzerdefinierte CSS-Dateien für Ihr Projekt erstellen. Tailwinds @apply Die Anweisung ermöglicht es Ihnen, ihre Tool-Klassen in benutzerdefiniertem CSS wiederzuverwenden. Für sehr spezielle Styles, die nicht mit praktischen Klassenkombinationen realisiert werden können, oder für Szenarien, die komplexe CSS-Eigenschaften (wie Keyframe-Animationen) erfordern, ist das Schreiben von Hand-CSS immer noch notwendig. Tailwind bietet lediglich eine effizientere Methode zur Bearbeitung von mehr als 90% allgemeiner Styling-Anforderungen in einem Projekt.