Tailwind CSS ist ein Utility-First-CSS-Framework, mit dem Entwickler benutzerdefinierte Webkomponenten entwerfen können, ohne zu einer CSS-Datei wechseln zu müssen. In diesem Tutorial erfahren Sie, wie Sie Tailwind CSS in React installieren und wie Sie damit eine einfache React-Seite erstellen können.

Warum Tailwind CSS verwenden?

Es gibt schon viele CSS Frameworks, die das Entwerfen von Webseiten durch Entwickler vereinfachen. Warum also sollten Sie Tailwind CSS verwenden?

CSS-Frameworks wie Bootstrap und Foundation sind eigenständige Frameworks, d. h. sie bieten Entwicklern vordefinierte Komponenten mit Standardstilen. Dies schränkt sowohl die Anpassung als auch die Kreativität ein, und Sie erhalten Websites, die eher generisch aussehen.

Rückenwind-CSS, ist jedoch ein Utility-First-Framework, das Ihnen die kreative Kontrolle zum Erstellen dynamischer Komponenten gibt. Und im Gegensatz zu Bootstrap können Sie Designs einfach nach Belieben anpassen.

Ein weiterer Vorteil der Verwendung von Tailwind CSS ist, dass Sie am Ende mit einer kleinen CSS-Paketgröße enden, da es alle entfernt unbenutztes CSS während des Build-Prozesses (was sich von Bootstrap unterscheidet, da es alle CSS-Dateien in der bauen).

Erfahren Sie mehr über die Unterschiede zwischen Tailwind CSS und Bootstrap aus unserem Artikel zum Thema.

Nachteile der Verwendung von Tailwind CSS

Tailwind CSS hat selbst für erfahrene Entwickler eine steile Lernkurve. Es dauert einige Zeit, bis Sie lernen, wie Sie die Hilfsklassen vollständig verwenden, und Sie müssen möglicherweise häufig in der Dokumentation nachschlagen. Nachdem Sie sich jedoch mit den Klassen vertraut gemacht haben, werden Sie feststellen, dass es im Vergleich zu einfachem CSS einfacher und schneller ist.

Die meisten Entwickler befolgen gerne das Prinzip der Trennung von Bedenken, sodass die CSS- und HTML-Dateien in verschiedene Dateien geschrieben werden. Mit Tailwind CSS schreiben Sie das CSS direkt in das HTML-Markup – für manche ein Nachteil.

Trotz dieser Nachteile ist Tailwind CSS ein Framework, das Sie ernsthaft in Betracht ziehen sollten, wenn Sie bereits mit CSS vertraut sind und Designs schneller erstellen möchten.

Erste Schritte: Erstellen Sie ein React-Projekt

Führen Sie den folgenden Befehl im Terminal aus, um a zu rüsten Reagieren Anwendung verwenden Erstellen-Reagieren-App.

npx create-react-app reagieren-Rückenwind

Erstellen-Reagieren-App bietet eine einfache Möglichkeit, eine React-App zu erstellen, ohne Build-Tools wie Webpack, Babel oder Linters zu konfigurieren. Das bedeutet, dass Sie innerhalb von Minuten eine funktionierende React-Umgebung haben.

Der obige Befehl erstellt einen neuen Ordner mit dem Namen reagieren-Rückenwind. Navigieren Sie zu dem Ordner und öffnen Sie ihn mit Ihrem bevorzugten Texteditor.

cd reagieren-Rückenwind

Installieren Sie als Nächstes Tailwind CSS und konfigurieren Sie es so, dass es mit der React-Anwendung funktioniert.

Verwenden Sie Tailwind CSS in React

Installieren Sie Tailwind CSS und seine Abhängigkeiten mit diesem Befehl:

npm installiere tailwindcss postcss Autoprefixer

PostCSS verwendet JavaScript-Plugins, um CSS mit den meisten Browsern kompatibel zu machen. Es überprüft den Browser, in dem die Anwendung ausgeführt wird, und bestimmt die Polyfills, die erforderlich sind, damit Ihr CSS nahtlos funktioniert. Autoprefixer ist ein PostCSS-Plugin, das Werte von verwendet caniuse.com zum automatischen Hinzufügen von Herstellerpräfixen zu CSS-Regeln.

Tailwind-CSS initialisieren

Führen Sie die aus Rückenwind Befehl zum Generieren von Tailwind-CSS-Standardkonfigurationsdateien.

npx tailwindcss init

Dies schafft tailwind.config.js im Stammordner, der alle Konfigurationsdateien von Tailwind speichert und Folgendes enthält:

module.exports = {
 Inhalt: [],
 Thema: {
 erweitern: {},
 },
 Plugins: [],
}

Vorlagenpfade konfigurieren

Sie müssen Tailwind CSS mitteilen, welche Dateien überprüft werden sollen, um festzustellen, welche CSS-Klassen verwendet werden. Dadurch kann Tailwind die ungenutzten Klassen identifizieren und entfernen und somit die Größe des generierten CSS reduzieren.

Im tailwind.config.js, Fügen Sie die Vorlagenpfade unter dem Inhaltsschlüssel hinzu.

module.exports = {
 Inhalt: [
 "./src/**/*.{js, jsx, ts, tsx}",
 ],
 Thema: {
 erweitern: {},
 },
 Plugins: [],
}

Fügen Sie Tailwind CSS in React ein

Der nächste Schritt besteht darin, Tailwind CSS in die Anwendung einzubinden, die verwendet wird @Rückenwind Richtlinien.

Alles drin löschen index.css und fügen Sie Folgendes hinzu, um die Basisstile, Komponenten und Dienstprogramme zu importieren.

@Rückenwindbasis;
@Rückenwindkomponenten;
@tailwind-Dienstprogramme;

Stellen Sie schließlich sicher index.css wird importiert index.js und Tailwind CSS sind einsatzbereit.

Verwenden von Tailwind CSS zum Stylen einer React-Komponente

Sie erstellen die unten stehende einfache Webseite und gestalten sie mit den Utility-Klassen von Tailwind.

Diese Seite enthält zwei Hauptabschnitte: a Navigationsleiste, und der Heldenabschnitt (der eine Überschrift und eine Schaltfläche hat).

Um zu veranschaulichen, wie Tailwind CSS das Schreiben von CSS erleichtert, versuchen Sie, die Webseite mit einfachem CSS und Tailwind CSS zu gestalten.

Beginnen Sie mit der Änderung der App.js in dem Quelle Ordner, um den unnötigen Code zu entfernen.

importiere './App.css'
Funktion App() {
 Rückkehr (



 );
}
Standard-App exportieren;

Fügen Sie als Nächstes den Inhalt der Webseite hinzu App.js.

importiere "./App.css";
Funktion App() {
 Rückkehr (







 Tailwind CSS erleichtert das Styling von React-Komponenten!



Loslegen






 );
}

Um einfaches CSS zu verwenden, fügen Sie das CSS zu hinzu App.css.

Navi {
 Anzeige: Flex;
 Begründungsinhalt: Zwischenraum;
 Polsterung: 16px 36px;
 Farbe: #000;
 Box-Schatten: 0px 2px 5px 0px rgba (168, 168, 168, 0,75);
}
.logo {
 Schriftgröße: 18px;
 Schriftdicke: fett;
}
ul {
 Listenstil: keiner;
 Anzeige: Inline-Flex;
}
ul li {
 Rand links: 16px;
 Cursor: Zeiger;
}
.held {
 Anzeige: Flex;
 Biegerichtung: Säule;
 Ausrichtungselemente: Mitte;
 Rand oben: 64px;
}
h1 {
 Schriftgröße: 36px;
 Textausrichtung: Mitte;
}
.btn {
 Hintergrundfarbe: #000000;
 Farbe: #fff;
 Polsterung: 10px;
 Breite: fit-Inhalt;
 Rand oben: 36px;
}

Mit Tailwind CSS müssen Sie die CSS-Regeln nicht für jede Klasse schreiben. Stattdessen verwenden Sie Hilfsklassen. Dies sind Klassen, die auf eine einzelne CSS-Eigenschaft beschränkt sind. Wenn Sie beispielsweise eine Schaltfläche mit schwarzem Hintergrund und weißer Textfarbe erstellen möchten, müssen Sie die verwenden bg-schwarz und Text-weiß Gebrauchsklassen.

App.js sollte so aussehen.

Funktion App() {
 Rückkehr (







 Tailwind CSS erleichtert das Styling von React-Komponenten!




 Loslegen







 );
}

Sie müssen nicht importieren App.css da die von Tailwind CSS generierten Stile in gespeichert sind index.css in die du importiert hast index.js früher.

Im Vergleich zu einfachem CSS führt dieser Ansatz zu weniger leicht verständlichem Code.

Code mit Stil mit Tailwind CSS

In diesem Artikel haben Sie etwas über Tailwind CSS, seine Stärken und Nachteile erfahren und erfahren, wie Sie seine Hilfsklassen in React-Anwendungen verwenden können. Abgesehen von Klassen bietet Tailwind CSS auch andere zusätzliche Funktionen, einschließlich der Möglichkeit, ansprechende Layouts und wiederverwendbare Komponenten zu erstellen.

Aber wie bereits erwähnt, ist Tailwind bei weitem nicht das einzige CSS-Framework auf dem Markt. Welche werden Sie für Ihr nächstes Projekt verwenden?

Rückenwind CSS vs. Bootstrap: Welches ist ein besseres Framework?

Bei der Auswahl eines CSS-Frameworks ist es wichtig, dasjenige zu finden, das Ihren Anforderungen entspricht.

Lesen Sie weiter

Über den Autor