So installieren und verwenden Sie Tailwind CSS in einer Next.js-App

Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

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.

MAKEUSEOF VIDEO DES TAGES

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.

Windows 10 untere Taskleiste funktioniert nicht

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:

D4CC874C158D9005DBCB6474723F8993EDC9E47

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 :

 /** @type {import('tailwindcss').Config} */  
module.exports = { 
    content: [  
        "./app/**/*.{js,ts,jsx,tsx}", 
        "./pages/**/*.{js,ts,jsx,tsx}", 
        "./components/**/*.{js,ts,jsx,tsx}", 
 
        // Or if using `src` directory:  
        "./src/**/*.{js,ts,jsx,tsx}", 
    ], 
    theme: {  
        extend: {}, 
    }, 
    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.

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

Build-Prozess ausführen

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

 npm run dev

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

Tailwind hat den Port geöffnet, um den Browser anzuzeigen

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:

 export default function Home() { 
    return ( 
        <body className="bg-blue-300"> 
            <h1 className='text-red-900'>Hello Tailwind 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.