Wenn Sie Ihre Apps mit einem schnellen, flexiblen und zuverlässigen Framework gestalten möchten, ist Tailwind CSS eine großartige Option. Tailwind ist ein CSS-Framework, mit dem Sie benutzerdefinierte Webkomponenten entwerfen können. Sie können Komponenten entwerfen, ohne zwischen HTML- und CSS-Dateien hin und her wechseln zu müssen.

Im Gegensatz zu Bootstrap hat Tailwind keine vordefinierten Klassen. Stattdessen können Sie Ihre eigenen anpassen. Mit Tailwind können Sie komplexe Komponenten mit primitiven Dienstprogrammen, Funktionen und Anweisungen erstellen.

Erfahren Sie, wie Sie Tailwind installieren und verwenden, um beeindruckende Benutzeroberflächen in Ihren Next.js-Projekten zu erstellen.

Installieren Sie Tailwind CSS in Next.js

Beginnen Sie mit der Installation von Tailwind in einer Next.js-Anwendung. Der Prozess ist ähnlich wie Installieren von Tailwind in einer React-App, mit einem kleinen Unterschied im Konfigurationsprozess.

Gehen Sie zum Tailwind-CSS-Installation Buchseite. Dann gehen Sie zu Framework-Leitfäden Abschnitt und wählen Sie aus Next.js. Dieser Abschnitt enthält alle Anweisungen, die Sie zum Einrichten von Tailwind in Ihrem Next.js-Projekt benötigen.

So installieren Sie Tailwind über npm, der JavaScript-Paketmanager, führen Sie diese beiden Terminalbefehle aus:

npm install -D tailwindcss postcss Autoprefixer
npx tailwindcss init -p

Diese Befehle erstellen zwei Konfigurationsdateien mit dem Namen tailwind.config.js Und postcss.config.js im Root-Projektordner. Diese Dateien zeigen an, dass TailwindCSS erfolgreich installiert wurde. Sie können Tailwind CSS auch über die Tailwind CLI oder als PostCSS-Plugin installieren.

Vorlagen konfigurieren

Nach der Installation müssen Sie die im Installationshandbuch bereitgestellten Vorlagenpfade zu Ihrer App-Konfigurationsdatei konfigurieren. Fügen Sie den folgenden Code hinzu tailwind.config.js-Datei:

/** @Typ {import('tailwindcss').Config}*/
Modul.exporte = {
 Inhalt: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Oder bei Verwendung des `src`-Verzeichnisses: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 Thema: { 
 erweitern: {},
 },
 Plugins: [],
}

Rückenwindrichtlinie zur App hinzufügen

Fügen Sie als Nächstes die folgenden Tailwind-Anweisungen zu Ihrer App-CSS-Datei hinzu. Dies ist die Datei mit dem Namen global.css. Sie sollten den Inhalt der global.css-Datei löschen und die Tailwind-Direktiven hinzufügen.

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

Build-Prozess ausführen

Führen Sie nun auf dem Terminal das CLI-Tool mit dem folgenden Befehl aus:

npm laufen dev

Dieser Befehl durchsucht Ihre Vorlagendateien nach Klassen und erstellt Ihr CSS. Es öffnet einen Port, damit Sie den Browser anzeigen können.

Wenn Sie nun zum Server unter navigieren http://localhost: 3000 Sie werden Ihre App sehen. Sie sollten eine geringfügige Änderung des Inhalts bemerken. Dies zeigt an, dass der Installationsprozess erfolgreich war und Tailwind CSS aktiv ist.

Rückenwind im Projekt verwenden

Als Nächstes testen wir Tailwind-CSS-Funktionen, indem wir Klassen auf Ihr Projekt anwenden. Sie haben beispielsweise eine App mit dem Text „Hallo Rückenwind“. Sie möchten ihm eine rote Farbe mit einem hellblauen Hintergrund geben.

Ein... kreieren Startseite.tsx Datei dann den folgenden Code hinzufügen:

ExportStandardFunktionHeim() {
zurückkehren (
"bg-blau-300">
'text-rot-900'>Hallo Rückenwind CSS</h1>
 </body>
 );
} 

Wenn Sie jetzt zum Browser navigieren, sehen Sie, dass sich der Text in Rot geändert hat und der Hintergrund blau ist.

Sie können andere CSS-Funktionen von Tailwind erkunden, um andere Komponenten Ihrer App zu gestalten. Mit den bedingten Modifikatoren können Sie reaktive Zustände wie Schweben und Fokus erstellen. Sie können Ihre Seiten auch entsprechend den Vorlieben des Benutzers an dunkle und helle Modi anpassen.

Vorteile der Verwendung von Tailwind CSS

Tailwind CSS wurde 2017 von Adam Wathan entwickelt und unterscheidet sich in vielerlei Hinsicht von anderen CSS-Bibliotheken. Es hat keine Laufzeit, was es blitzschnell macht. Und ist einfach zu installieren. Tailwind durchsucht alle HTML-Dateien und JavaScript-Komponenten nach Klassennamen in Ihrer App. Anschließend generiert es die entsprechenden Styles, die die Elemente gestalten.

Mit Tailwind CSS können Sie komplexe Komponenten aus primitiven Dienstprogrammen entwerfen. Sie können Stile komponentenübergreifend wiederverwenden und Modifikatoren verwenden, um ansprechende Benutzeroberflächen zu gestalten. Verwenden Sie die Schritte hier, um zu erfahren, wie Sie Tailwind CSS installieren und verwenden, um Apps anzupassen, die zu Ihrer Marke passen.