Um Next.js mit Tailwind CSS einzurichten, befolgen Sie diese Schritte:

Schritt 1: Erstellen Sie ein neues Next.js-Projekt

Wenn Sie noch kein Next.js-Projekt erstellt haben, können Sie eines mit create-next-app erstellen.

npx create-next-app@latest my-next-app
cd my-next-app

Schritt 2: Tailwind CSS installieren

Installieren Sie Tailwind CSS zusammen mit den erforderlichen Abhängigkeiten in Ihrem Next.js-Projekt.

npm install -D tailwindcss postcss autoprefixer

Schritt 3: Tailwind CSS initialisieren

Initialisieren Sie Tailwind CSS, indem Sie die Dateien tailwind.config.js und postcss.config.js generieren.

npx tailwindcss init -p

Dadurch werden die Dateien tailwind.config.js und postcss.config.js im Stammverzeichnis Ihres Projekts erstellt.

Schritt 4: Tailwind.config.js konfigurieren

Ersetzen Sie den Inhalt von tailwind.config.js durch die folgende Konfiguration, um Tailwind in den relevanten Dateien zu aktivieren:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Schritt 5: Fügen Sie Tailwind CSS zu Ihren CSS-Dateien hinzu

Öffnen oder erstellen Sie in Ihrem Projekt die Datei ./styles/globals.css und fügen Sie die folgenden Zeilen hinzu, um die Basis, Komponenten und Dienstprogramme von Tailwind zu importieren:

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

Schritt 6: Führen Sie den Entwicklungsserver aus

Jetzt den Entwicklungsserver starten, um Tailwind CSS in Aktion zu sehen:

npm run dev

Ihr Next.js-Projekt sollte jetzt mit Tailwind CSS eingerichtet sein. Sie können Tailwind-Dienstprogrammklassen in Ihren Komponenten verwenden, um sie zu formatieren.

Beispielverwendung

Hier ist ein Beispiel für die Verwendung von Tailwind CSS in einer Next.js-Seite (pages/index.js):

export default function Home() {
  return (
    

      

        Welcome to Next.js with Tailwind CSS!
      
    
  );
}

Mit diesem Setup können Sie jetzt mit der Erstellung Ihrer Next.js-Anwendung mit dem Utility-First-CSS-Framework von Tailwind beginnen!