Einführung in Tailwind CSS und Praxis: Von Grund auf moderne, responsive Webseiten erstellen

Was ist Tailwind CSS?

Bei der traditionellen CSS-Entwicklung sind wir es gewohnt, semantische Klassennamen für Elemente der Seite zu definieren und die konkreten Stilregeln in einer separaten Stylesheet zu schreiben. Dieser Ansatz führt oft dazu, dass häufig zwischen HTML- und CSS-Dateien hin- und hergewechselt werden muss. Zudem werden die Stylesheets mit wachsenden Projekten zunehmend unübersichtlich und schwierig zu warten.Tailwind CSS Daher wurde ein völlig anderes Konzept für die Gestaltung von CSS verwendet – nämlich das Konzept der “Funktionalität vorrangig”. Dieses Konzept basiert auf einem atomaren („atomaren“) CSS-Framework, bei dem die Funktionalität der einzelnen Elemente im Vordergrund steht. Es bietet eine umfangreiche Sammlung fein abgestimmter, wiederverwendbarer Klassen, mit deren Hilfe Entwickler direkt in HTML oder JSX beliebige Designs erstellen können, indem sie diese Klassen kombinieren.

Sein Hauptvorteil liegt darin, dass es die Abhängigkeit von benutzerdefiniertem CSS beseitigt. Sie müssen sich nicht mehr den Kopf darüber zerbrechen, wie Sie Klassennamen für Buttons, Karten oder Navigationen erstellen sollen, und Sie müssen sich auch keine Sorgen um Stilkonflikte machen. Zum Beispiel, um einen Button mit abgerundeten Ecken, blauer Hintergrundfarbe, weißem Text und Innenabstand zu erstellen, müssen Sie einfach Folgendes schreiben:<button class=“rounded bg-blue-500 text-white p-4”>按钮</button>Diese Entwicklungsmethode erhöht erheblich die Geschwindigkeit und Konsistenz bei der Erstellung von Benutzeroberflächen. Zudem können mithilfe von Tools wie PurgeCSS – das in Tailwind v3 und späteren Versionen als Optimierungswerkzeug integriert ist – nicht verwendete Styles automatisch entfernt werden. Das resultierende CSS-File ist somit sehr kompakt.

Wie Sie mit Tailwind CSS beginnen können

anfangen zu benutzen Tailwind CSS Es gibt verschiedene Möglichkeiten, am häufigsten wird dies über die offizielle CLI-Werkzeugkette oder durch die Integration mit Frontend-Build-Tools erfolgt.

Empfohlene Lektüre Einführung in Tailwind CSS: Erstellen Sie moderne, responsive Benutzeroberflächen von Grund auf。

Schnelle Installation über npm und CLI

Die am meisten empfohlene Methode ist die Installation über npm sowie die anschließende Nutzung der Befehlszeilenunterstützung zur Initialisierung. Führen Sie zunächst im Root-Verzeichnis Ihres Projekts im Terminal den folgenden Befehl aus, um Tailwind sowie seine Abhängigkeiten zu installieren:

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

Der erste Befehl wird… tailwindcss Installieren Sie es als Entwicklungsdienst (Development Dependency). Der zweite Befehl generiert eine Standardkonfigurationsdatei. tailwind.config.jsDieses Datei ist der Kern Ihrer Anpassungen an das Tailwind-Thema, der Installation von Plugins sowie der Konfiguration der Purge-Pfade.

Konfigurieren Sie die Konfigurationsdatei von Tailwind

Generiert tailwind.config.js Der ursprüngliche Inhalt der Datei ist sehr einfach. Um sicherzustellen, dass Tailwind Ihre HTML-Datei scannen und nicht verwendete Styles entfernen kann, müssen Sie die entsprechenden Konfigurationen vornehmen. content Felder. Zum Beispiel könnte die Konfiguration in einem typischen Vue- oder React-Projekt wie folgt aussehen:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [“./src/**/*.{html,js,vue,jsx,tsx}”],
  theme: {
    extend: {},
  },
  plugins: [],
}

Diese Konfiguration weist Tailwind an, nach bestimmten Elementen oder Daten zu suchen. src Alle Dateien im Verzeichnis mit den angegebenen Erweiterungen werden ausgewählt, und daraus die verwendeten Tool-Klassen extrahiert.

Grundlegende Styles in das Projekt einbinden

Nach der Installation und Konfiguration müssen Sie die verschiedenen Komponenten von Tailwind in die CSS-Datei am Wurzelverzeichnis des Projekts einbinden. In der Regel erstellen Sie eine Datei mit dem Namen… src/styles.css oder src/index.css Die Datei und fügen Sie die folgenden Anweisungen hinzu:

Empfohlene Lektüre Tailwind CSS – Ein praktischer Leitfaden von der Einführung bis zur Meisterschaft。

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

@tailwind base Es werden die Grundvorlagen von Tailwind eingefügt, um die Standardvorlagen zurückzusetzen und einen einheitlichen Ausgangspunkt zu schaffen.@tailwind components Es werden die mit Tailwind bereitgestellten Komponentenklassen (z. B. Container) sowie weitere Komponenten eingefügt, die Sie selbst erstellt haben. @apply Die Komponentenklassen, für die Befehle registriert wurden.@tailwind utilities Dann werden alle Funktionsklassen eingefügt – das ist der Kernbereich.

Schließlich stellen Sie sicher, dass Ihr Build-Prozess (z. B. mit Vite oder Webpack) in der Lage ist, diese CSS-Datei zu verarbeiten – entweder direkt oder mithilfe von CLI-Befehlen. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Für die Echtzeit-Kompilierung.

Einführung in die Kernfunktionsklassen von Tailwind CSS

Tailwind CSS Die Tool-Klassen übernehmen die Steuerung aller CSS-Eigenschaften wie Layout, Abstände, Formatierung, Farben, Rahmen und Effekte. Die Namenskonventionen dieser Klassen sind sehr intuitiv und folgen in der Regel einem einheitlichen Muster. 属性{方向？}-{尺寸} Das Muster.

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

Abstand- und Größenkontrolle

Tailwind verwendet ein einheitliches System von numerischen Proportionen, um Innen- und Außenränder, Breiten sowie Höhen zu steuern. Zum Beispiel…p-4 Ausdrucken padding: 1rem(Standard: 1 Einheit = 0,25rem)m-2 Ausdrucken margin: 0.5remSie können dies verwenden. px-、py-、pt-、pr- Präfixe werden verwendet, um eine bestimmte Richtung anzugeben. Was die Abmessungen betrifft…w-64 Ausdrucken width: 16rem，h-screen Ausdrucken height: 100vhDiese Konsistenz macht die Abstände und Ausrichtungen der Benutzeroberflächenelemente äußerst einfach und ordentlich.

Farben und Hintergrundstile

Tailwind bietet eine sorgfältig gestaltete Farbpalette, bei der jede Farbe in einer Helligkeitsskala von 50 bis 900 verfügbar ist. Dies wird durch Klassennamen realisiert… text-blue-600(Farbe des Textes),bg-gray-100(Hintergrundfarbe)border-red-300(Die Farbe des Rahmens kann direkt angewendet werden.) Sie können auch ganz einfach ein gradientiertes Hintergrundbild einsetzen, zum Beispiel… bg-gradient-to-r from-cyan-500 to-blue-500 Dies beschreibt eine lineare Farbverlaufsanpassung, die von Blauviolett auf Blau reicht – also von links nach rechts.

Reaktives Design und Interaktionszustände

Das responsive Design von Tailwind folgt dem Prinzip “Mobile First” – jede Funktionsklasse ist standardmäßig für mobile Geräte konzipiert. Um Styles auf größeren Bildschirmgrößen anzuwenden, muss der entsprechende responsive Prefix hinzugefügt werden. Zum Beispiel:text-center md:text-left lg:text-2xl Dies beschreibt die Anweisung, Text auf mobilen Geräten in der Mitte anzuzeigen – insbesondere auf Geräten mit mittlerer Bildschirmdiagonale.md:) und höher werden die Elemente links ausgerichtet; auf großen Bildschirmen…lg:Für Größen 16 (16px) und höher wird die Schriftgröße so eingestellt… 1.5rem。

Empfohlene Lektüre Tailwind CSS – Ein Leitfaden durch die Kernkonzepte und praktischen Tipps, von Anfängern zu Experten。

Auch die Verarbeitung des Interaktionszustands ist äußerst einfach. Sie können Präfixe wie … verwenden. hover:、focus:、active: Um Styles für verschiedene Zustände hinzuzufügen, können Sie beispielsweise folgende Schritte ausführen:<button class=“bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 …”> Es ist einfach möglich, Effekte wie Hover- und Fokussierungsverhalten zu erzeugen, ohne dass man irgendeinen eigenen CSS-Code schreiben muss.

Praxis: Erstellung eines Kartenkomponenten mit Tailwind CSS

Lassen Sie uns das oben Genannte durch die Erstellung eines Kartenkomponenten im modernen Stil veranschaulichen. Diese Karte soll ein Bild, einen Titel, Beschreibungstext, Tags sowie einen Aktionssbutton enthalten und zudem responsiv sein (d.h. auf verschiedenen Geräten und Bildschirmgrößen gut angezeigt werden).

\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

Zunächst erstellen wir den HTML-Strukturrahmen für die Karte und wenden grundlegende Layout- sowie Container-Klassen an:

<div class="“max-w-sm" rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <!-- 图片区域 -->
  <img class="“w-full" h-48 object-cover” src="“https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600”" alt="“Technologieprodukte”">
  <!-- 内容区域 -->
  <div class="“px-6" py-4”>
    <div class="“font-bold" text-xl mb-2 text-gray-800”>Praktischer Leitfaden für Tailwind CSS</div>
    <p class="“text-gray-600" text-base”>
      Lernen Sie, wie Sie mithilfe von atomarisierten Toolklassen schnell schöne, einheitliche und leistungsstarke moderne Benutzeroberflächen erstellen können. Sie müssen nicht zwischen verschiedenen Dateien wechseln – konzentrieren Sie sich einfach auf das Design an sich.
    </p>
  </div>
  <!-- 标签区域 -->
  <div class="“px-6" pt-2 pb-4”>
    <span class="“inline-block" bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”>#CSS-Framework</span>
    <span class="“inline-block" bg-green-100 text-green-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># Frontend-Entwicklung</span>
    <span class="“inline-block" bg-purple-100 text-purple-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># – responsiv</span>
  </div>
  <!-- 行动按钮 -->
  <div class="“px-6" pb-6”>
    <button class="“w-full" bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50”>
      Lesen Sie sofort.
    </button>
  </div>
</div>

Analyse der Kartenstruktur und -gestaltung

In dieser Karte haben wir eine große Anzahl von Tools verwendet. Der äußerste Container, in dem all diese Tools enthalten sind, wurde… max-w-sm Um die maximale Breite zu begrenzen…rounded-xl Die Umsetzung von großen Rundkanten…shadow-lg Es wurden tiefere Schatten hinzugefügt, um ein Gefühl von Dreidimensionalität zu erzeugen.bg-white Einstellen eines weißen Hintergrunds.mx-auto Horizontale Ausrichtung in der Mitte erreichen.

Das Bildbereich wird durch… („The image area is processed by…“) h-48 Die Höhe wurde festgelegt und anschließend wurde dies umgesetzt. object-cover Stellen Sie sicher, dass das Bild richtig geschnitten und ausgefüllt wird. Die Innenräume des Inhaltsbereichs werden durch… (The padding of the content area is determined by…) px-6 py-4 „Kontrolle.“ Der Titel ist fett gedruckt.font-boldGroße Schriftgrößentext-xl) und der Abstand nach unten (mb-2）。

Die Tags verwenden inline-block-Layout-Methoden.inline-blockIn Kombination mit der Hintergrundfarbe, der Textfarbe und den abgerundeten Ecken…rounded-full) und kleiner Innenabstand (px-3 py-1Der Effekt im Kapsel-Stil wird durch die entsprechenden Designelemente erreicht. Die Schaltflächen hingegen verfügen über ein integriertes, gradientenfarbenes Hintergrunddesign.bg-gradient-to-rHover-Gradient-Veränderungenhover:from-、hover:to-Übergangsanimationen (Transition animations)transition duration-300) sowie der Fokussierungsring (focus:ring-2Sowie weitere hochentwickelte Effekte.

Die Kartenkomponente soll responsiv gestaltet werden.

Um sicherzustellen, dass die Karten auf größeren Bildschirmen besser dargestellt werden, können wir ganz einfach einige responsive Klasse hinzufügen. Zum Beispiel möchten wir, dass die Karten auf mittelgroßen Bildschirmen…md:Ab einer bestimmten Größe können die Karten horizontal angeordnet werden – das Bild befindet sich dann auf der linken Seite und der Inhalt auf der rechten Seite. Wir können die äußere Struktur sowie die Klasseen für das Bild und den Inhalt leicht anpassen.

<div class="“max-w-4xl" md:flex rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <img class="“md:w-1/3" w-full h-48 md:h-auto object-cover” src="“…”" alt="“…”">
  <div class="“md:w-2/3" p-6 md:p-8”>
    <!-- 标题、描述、标签、按钮等内容 -->
  </div>
</div>

Durch Hinzufügen md:flex Weisen Sie den Container auf mittleren Bildschirmen auf eine Flex-Layout-Anordnung um und verwenden Sie dazu… md:w-1/3 und md:w-2/3 Steuern Sie das Verhältnis der Breiten von Bildern und Inhaltsbereichen. md:h-auto Lassen Sie die Höhe automatisch anpassen – insbesondere für den Inhaltsbereich. md:p-8 Dadurch wird der Innenabstand unter dem großen Bildschirm vergrößert. Mit nur wenigen Änderungen an den Klassen-Definitionen ist eine responsive Karte fertiggestellt.

Zusammenfassungen

Tailwind CSS Mit seiner funktionsorientierten und atomaren Klassensammlung hat Tailwind CSS unsere Art und Weise, CSS zu schreiben, grundlegend verändert. Es beseitigt die mentalen Belastungen bei der Benennung von Styles und steigert die Effizienz sowie die Konsistenz der UI-Entwicklung erheblich. Von einfachen Abständekontrollen über komplexe responsive Layouts bis hin zu interaktiven Zuständen – all das kann mithilfe kombinierbarer, intuitiver Klassennamen schnell umgesetzt werden. Zwar mag es auf den ersten Blick unästhetisch erscheinen, viele Klassennamen in das HTML einzufügen, doch die verbesserte Entwicklungsqualität, die reduzierten Wartungskosten sowie die hochleistungsfähigen Style-Dateien, die am Ende entstehen, machen Tailwind CSS zu einer äußerst wettbewerbsfähigen Lösung für moderne Webprojekte. Durch die Einführung in dieses Thema sowie die praktischen Übungen hoffen wir, dass du erfolgreich auf den Weg zur effizienten Entwicklung mit Tailwind CSS einsteigen kannst.

FAQ Häufig gestellte Fragen

Was ist der Unterschied zwischen Tailwind CSS und inline Styles?

Tailwind CSS unterscheidet sich grundlegend von inlinesen Styles. Inlinesen Styles…style=””Attribute können weder für ein responsives Design mithilfe von Media Queries genutzt werden noch können sie Pseudoklassenzustände verarbeiten. :hover oder :focusDarüber hinaus überschreiben inline Styles alle anderen Styles und weisen ein Fehlen an Struktur und Kontrolle auf.

Die Tool-Klassen von Tailwind sind tatsächlich vordefinierte, bindende Design-„Tokens“. Sie basieren auf einem strengen Designsystem – einschließlich Abständsverhältnissen, Farbpaletten und Breakpoints – und sorgen so für eine einheitliche Gestaltung. Zudem unterstützt Tailwind vollständig responsive sowie Zustandsbezeichnungen („state prefixes“) und lässt sich durch Konfiguration auf globaler Ebene anpassen, was inkludierte Styles nicht erreichen können.

Wie kann man das Problem lösen, dass in großen Projekten zu lange Klassennamen in HTML für Verwirrung sorgen?

Für wiederholend auftretende, komplexe Komponentenstile empfiehlt Tailwind die Verwendung… @apply Die Anweisungen extrahieren die Komponentenklassen aus dem CSS oder nutzen direkt die Komponentenfähigkeiten von JavaScript-Frameworks wie React oder Vue, um die entsprechenden Funktionen zu verpacken.

Zum Beispiel kannst du die Sammlung dieser komplexen Button-Klassen in eine CSS-Component-Klasse extrahieren:

.btn-primary {
  @apply w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50;
}

Und dann wird es direkt in HTML verwendet. <button class=“btn-primary”>Bessere Praxis besteht darin, in React eine… („…“ wird im Originaltext nicht weiter ausgeführt; daher bleibt der Satz unvollständig.) <Button> Komponenten – oder wie man eine Komponente in Vue erstellt. <MyButton> Die Styles werden innerhalb der Komponente abgelegt, wodurch die Templates einfacher und übersichtlicher bleiben.

Wie optimiert Tailwind CSS die Größe der letztendlich generierten CSS-Dateien?

Tailwind CSS erzeugt im Entwicklungsmodus eine umfangreiche Stylesheet, die alle möglichen Toolklassen enthält, um eine schnelle Entwicklung zu ermöglichen. Bei der Produktionserstellung wird jedoch ein sehr wichtiger Optimierungsprozess ausgeführt.

Es wird sich an den Inhalt Ihrer Konfigurationsdatei anpassen. tailwind.config.js Das ist eine gute Frage. content Die in den Feldern angegebenen Dateipfade werden verwendet, um alle Template-Dateien (z. B. .html, .jsx, .vue) zu scannen. Dadurch werden die tatsächlich genutzten Tool-Klassen identifiziert, und alle nicht verwendeten Styles werden aus der endgültigen CSS-Datei entfernt. Dieser Prozess ist hochoptimiert und kann in der Regel die Größe der CSS-Datei auf 10 KB oder sogar weniger reduzieren, was zu einer deutlich besseren Leistung führt.

Kann das standardmäßige Designsystem von Tailwind angepasst werden?

Das ist durchaus möglich – und genau das ist auch einer der Stärken von Tailwind CSS: Alle Anpassungen und Personalisierungen können direkt durchgeführt werden. tailwind.config.js Die Aktion wird innerhalb der Datei durchgeführt.

Sie können… theme.extend Unter einem Objekt kann das Standardthema erweitert werden – beispielsweise durch das Hinzufügen neuer Farben, Abstandswerte, Schriftgrößen oder Breakpoints. Du kannst dies ebenfalls tun… theme Unter einem Objekt können bestimmte Teile des Standardthemas direkt überschrieben werden. Zum Beispiel können Sie die Hauptfarbe und die Breakpoints so anpassen, wie Sie es wünschen:

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1992d4’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
    screens: {
      ‘tablet’: ‘640px’,
      ‘laptop’: ‘1024px’,
      ‘desktop’: ‘1280px’,
    },
  },
}

So kannst du das in deinem Projekt verwenden. bg-brand-blue、w-128 zu tablet: So etwas wie eine benutzerdefinierte Klasse also.