Tailwind CSS – Die ultimative Anleitung: Von der Einführung bis zu praktischen Tricks und Fähigkeiten

Was ist Tailwind CSS?

Tailwind CSS ist ein CSS-Framework, das eine Reihe von konfigurierbaren Low-Level-Utility-Klassen für die schnelle Erstellung individueller Benutzeroberflächen direkt in HTML bereitstellt. Im Gegensatz zu Frameworks wie Bootstrap oder Bulma, die vorgefertigte Komponenten (z.B. Schaltflächen, Karten) bereitstellen, bietet Tailwind atomare CSS-Klassen, von denen jede typischerweise nur einer oder einer Reihe von CSS-Eigenschaften entspricht. Zum Beispiel.text-center entsprechend text-align: center;，.p-4 entsprechend padding: 1rem;。

Diese Philosophie der “funktionalen Klassen” bedeutet, dass Entwickler jeden beliebigen Stil “zusammenstellen” können, indem sie diese einzelnen Klassen kombinieren, ohne eigenes CSS schreiben zu müssen, was die Entwicklungsgeschwindigkeit erheblich verbessert und die Stylesheets klein hält, da das Dadurch wird die Entwicklung erheblich beschleunigt und die Stylesheets bleiben klein, denn schließlich entfernt das Build-Tool alle ungenutzten Klassen durch “Tree-Shaking-Optimierung”.

Core Concepts and Working Principles

Das Verständnis der Kernkonzepte von Tailwind CSS ist der Schlüssel zur Beherrschung seines Wesens. Seine Design-Philosophie dreht sich um Praktikabilität, Kompositionsfähigkeit und responsives Design.

Empfohlene Lektüre Tailwind CSS – Ein praktischer Leitfaden von der Grundlage bis zur praktischen Anwendung sowie beste Praktiken。

Eine Designphilosophie, bei der die Funktionalität im Vordergrund steht.

“Praktische Anwendung ist der Eckpfeiler von Tailwind. Das Framework bietet eine große Anzahl von feinkörnigen Einzelfunktionsklassen, wie z.B. die .bg-blue-500、.rounded-lg、.flex. Die Entwickler bauen komplexe Komponenten, indem sie diese Klassen wie Legosteine kombinieren. Dieser Ansatz vermeidet die Notwendigkeit eines semantischen Klassennamens für jede Komponente im traditionellen CSS (z. B. .user-card) und eliminiert die Kosten für den Kontextwechsel, die beim Hin- und Herwechseln zwischen CSS- und HTML-Dateien entstehen.

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

Reaktives Design und Breakpoints

Tailwind verfügt über ein eingebautes System von responsiven Haltepunkten mit Klassennamen, die einfach vorangestellt werden können, um Stile für verschiedene Bildschirmgrößen anzuwenden. Die Standard-Präfixe für Haltepunkte umfassen:sm:、md:、lg:、xl:、2xl:。

Ein Element, das auf einem mobilen Gerät gestapelt und auf einem großen Bildschirm horizontal ausgerichtet ist, könnte zum Beispiel wie folgt implementiert werden:

<div class="flex flex-col md:flex-row">
  <div>Inhalt 1</div>
  <div>Inhalt 2</div>
</div>

Das bedeutet, dass die Standardeinstellung (mobil) ist flex-col(vertikal), auf einem mittleren Bildschirm (md:) und darüber wird flex-row(Horizontal).

Konfiguration und Anpassung

Die Standardkonfiguration von Tailwind finden Sie im Hauptverzeichnis des Projekts über die Option tailwind.config.js Datei für tiefgreifende Anpassungen. In dieser Datei können Sie Farbpaletten, Abstandsverhältnisse, Schriftarten und Haltepunktwerte ändern und sogar neue Hilfsklassen hinzufügen.

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

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Einmal angepasst, können Sie die .bg-brand-blue und .w-128 So etwas wie eine benutzerdefinierte Klasse also.

Grundlegende Verwendung und Installation

Bevor Sie mit der Nutzung von Tailwind beginnen können, müssen Sie es in Ihr Projekt integrieren; Tailwind kann auf verschiedene Arten installiert werden, am häufigsten über npm oder yarn.

Installation mithilfe von PostCSS (empfohlen)

Für die meisten modernen Frontend-Projekte (z.B. mit Vite, Webpack) ist die Installation über PostCSS der am besten integrierte Weg. Installieren Sie zunächst Tailwind und seine Abhängigkeiten über npm:

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Dadurch werden die erforderlichen Pakete installiert und eine Standard tailwind.config.js Konfigurationsdatei. Anschließend müssen Sie ein PostCSS-Profil erstellen (z. B. postcss.config.js) und fügen Sie Tailwind hinzu:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Als nächstes müssen Sie in Ihrer Haupt-CSS-Datei (z. B. der src/styles.cssDie Tailwind-Richtlinie wurde in der

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

Stellen Sie schließlich sicher, dass PostCSS im Build-Prozess Ihres Projekts korrekt behandelt wird. In Vite- oder Webpack-Projekten wird zum Beispiel automatisch die postcss.config.js。

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

Schnelle Prototypenentwicklung mithilfe von CDN (Content Delivery Network)

Für schnelle Prototypen, Demos oder einfache HTML-Dateien können CDN-Links verwendet werden. Fügen Sie einfach die <head> Fügen Sie den folgenden Link in den Abschnitt ein:

<script src="https://cdn.tailwindcss.com"></script>

Beachten Sie, dass der CDN-Ansatz keine Anpassungen unterstützt und nicht mit dem @apply und da sie alle Stile enthält, ist die Dateigröße sehr groß, so dass sie für Produktionsumgebungen nicht empfohlen wird.

\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

Optimierung von Bau und Produktion

Während der Entwicklung erzeugt Tailwind eine riesige CSS-Datei mit allen möglichen Klassen. Für die Produktionsumgebung muss ein Build-Prozess ausgeführt werden, um “den Baum zu schütteln”, d.h. alle nicht verwendeten Klassen aus HTML- und JavaScript-Komponenten zu entfernen. In der tailwind.config.js In China, durch content Feld teilt Tailwind mit, welche Dateien nach verwendeten Klassen durchsucht werden sollen:

module.exports = {
  content: ['./src/**/*.{html,js,vue,jsx,tsx}'],
  // ... 其他配置
}

Führen Sie dann den Build-Befehl aus (z. B. npm run build), erzeugt das Tailwind CLI oder PostCSS-Plugin eine minimierte CSS-Datei, die nur die benötigten Klassen enthält.

Fortgeschrittene Techniken und Best Practices

Sobald Sie die Grundlagen beherrschen, können Sie Tailwind mit ein paar fortgeschrittenen Tipps noch effizienter und eleganter nutzen.

Extrahieren von Komponenten und Verwendung der @apply-Anweisung

Während das direkte Kombinieren von Klassen in HTML der Hauptmodus von Tailwind ist, kann es überflüssig sein, eine lange Liste von Klassen immer wieder zu schreiben, wenn eine bestimmte Klassenkombination (z.B. ein bestimmter Stil einer Schaltfläche) in einem Projekt mehrfach vorkommt. In diesem Fall können Sie die @apply Richtlinie extrahiert wiederverwendbare Komponentenklassen in Ihrem CSS.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-500 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;
}

Danach muss man in HTML einfach nur… class="btn-primary" Das war's. Ein anderer Ansatz, der eher der Philosophie von Tailwind entspricht, ist die Nutzung der Komponentisierungsfähigkeiten von JavaScript-Frameworks (z. B. React, Vue), um wiederverwendbare UI-Blöcke zu kapseln.

Handhabung von Hover, Fokus, etc.

Tailwind bietet unterschiedliche Präfixe für verschiedene Interaktionszustände, wie z.B. hover:、focus:、active:、disabled:。

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  按钮
</button>

Sie können auch die tailwind.config.js „In“ variants Abschnitt, um bestimmte Zustandsvarianten für bestimmte Versorgungsklassen zu aktivieren oder zu deaktivieren.

Verwendung in Verbindung mit JavaScript-Frameworks

Tailwind funktioniert gut mit den wichtigsten Frontend-Frameworks wie React, Vue und Angular. In React können Sie Tailwind wie gewohnt in JSX's className Attribut mit Hilfe der Klasse Tailwind. Um das dynamische Spleißen von Klassennamen zu handhaben, können Sie eine Klasse wie clsx oder classnames Eine solche Toolbibliothek.

function Button({ isPrimary, children }) {
  const classes = clsx(
    'py-2 px-4 rounded-lg font-semibold',
    isPrimary ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'
  );
  return <button className={classes}>{children}</button>;
}

Erweitert mit benutzerdefinierten Plug-ins

Wenn Sie oder Ihr Team eine bestimmte Gruppe von Hilfsklassen benötigen, die in Tailwind nicht vorhanden sind, können Sie eigene Plug-ins schreiben. Plug-ins werden erstellt, indem man eine eigene Klasse in die tailwind.config.js eingeführt in der

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.scrollbar-hide': {
          /* 隐藏滚动条的 CSS */
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
        },
      })
    })
  ]
}

Zusammenfassungen

Tailwind CSS revolutioniert die Art und Weise, wie Entwickler CSS schreiben, durch seinen Utility-first-Ansatz. Es verlagert Stilentscheidungen von Stylesheets auf eine Auszeichnungssprache und erreicht große Entwicklungseffizienz und Designkonsistenz durch die Kombination einer großen Anzahl von feinkörnigen Funktionsklassen. Das leistungsstarke Konfigurationssystem ermöglicht eine tiefgreifende Anpassung an jedes Designsystem, während Optimierungen zur Erstellungszeit sicherstellen, dass das Endprodukt klein und kompakt ist. Ob für Rapid Prototyping oder große, komplexe Projekte, Tailwind CSS bietet eine leistungsstarke, flexible und wartbare Styling-Lösung. Die Beherrschung der Kernkonzepte, Workflows und fortgeschrittenen Techniken wird Ihnen einen Vorsprung in der modernen Frontend-Entwicklung verschaffen.

FAQ Häufig gestellte Fragen

Verschmutzen die Tailwind-CSS-Stile HTML?

Die CSS-Klassennamen von Tailwind lassen HTML so aussehen, als enthielte es eine Menge Inhalt, aber das ist keine “Stilverschmutzung” im traditionellen Sinne. Das Design ist insofern gewollt, als es die Stillogik auf der Ansichtsebene zentralisiert, die kognitive Belastung durch das Springen zwischen CSS und HTML beseitigt und eine enge Kopplung von Stil und Struktur erzwingt, was ein Vorteil bei der komponentenbasierten Entwicklung ist.

Wie kann ich die Standardklassen von Tailwind außer Kraft setzen oder anpassen?

Es gibt zwei Möglichkeiten, dies zu tun. Erstens können Sie eine neue Datei in die tailwind.config.js Die Datei der theme.extend Abschnitt, um Themenwerte hinzuzufügen oder zu erweitern (z. B. Farbe, Abstand), wodurch neue Klassen entstehen. Zweitens können Sie, wenn Sie einen Standardwert vollständig außer Kraft setzen wollen, eine neue Klasse in den Abschnitt theme Teil (anstelle von extend), um den neuen Wert direkt zu setzen. Für einmalige Überschreibungen ist es auch möglich, beliebige Werte mit Hilfe der eckigen Klammern hinzuzufügen, zum Beispiel top-[117px]。

Was ist der Unterschied zwischen dem Extrahieren von Komponenten mit @apply und dem direkten Schreiben von CSS?

ausnutzen @apply Klassen, die durch Direktiven extrahiert werden, sind im Wesentlichen immer noch eine Sammlung von Tailwind-Utility-Klassen, die von Tailwinds Konfiguration betroffen sind und schließlich vom Build-Tool verarbeitet werden. Das direkte Schreiben von reinem CSS liegt außerhalb des Tailwind-Ökosystems. Übermäßiger Gebrauch von @apply Dies kann dazu führen, dass Sie wieder traditionelles CSS schreiben müssen, was den Zweck von Tailwinds “Kombination von Klassen in HTML” zunichte macht. Es wird empfohlen, dass Sie eine bestimmte Stilkombination nur dann verwenden, wenn sie wirklich häufig wiederverwendet wird. @apply。

Wie funktioniert Tailwind CSS in einer Produktionsumgebung?

Richtig gebaut und “baumschüttelnd” optimiert, leistet Tailwind CSS sehr gute Arbeit. Das Build-Tool scannt alle Ihre Quellcode-Dateien, um die Klassen zu finden, die tatsächlich verwendet werden, und generiert dann nur diese Klassen in der endgültigen CSS-Datei. Das bedeutet, dass die endgültige CSS-Datei für den Benutzer oft viel kleiner ist als handgeschriebenes CSS oder CSS mit nicht optimierten Komponentenbibliotheken, was zu schneller ladenden Seiten führt.

Ist Tailwind für die Verwendung mit UI-Komponentenbibliotheken geeignet?

Je nach Situation ist Tailwind eine vollständige Styling-Lösung für sich selbst und erfordert normalerweise keine weitere vollständige UI-Komponentenbibliothek (wie Material-UI). Sie können jedoch Komponentenbibliotheken verwenden, die auf Tailwind aufbauen, wie z.B. Headless UI (das ungestylte interaktive Komponenten bietet) oder DaisyUI (das gestylte Komponenten bietet). Diese Bibliotheken lassen sich nahtlos in Tailwinds Themen und Toolkits integrieren, um die Entwicklung weiter zu beschleunigen.