Tailwind CSS

Tailwind CSS ist ein Utility-First-CSS-Framework, das vollständig mit Next.js kompatibel ist. Diese Anleitung führt Sie durch die Installation von Tailwind CSS in Ihrer Next.js-Anwendung.

Installation von Tailwind

Installieren Sie die erforderlichen Tailwind-CSS-Pakete:

npm install -D tailwindcss @tailwindcss/postcss postcss

Gut zu wissen: Wenn Sie die create-next-app-CLI verwenden, um Ihr Projekt zu erstellen, fragt Next.js, ob Sie Tailwind installieren möchten, und konfiguriert das Projekt automatisch.

Konfiguration von Tailwind

Erstellen Sie eine postcss.config.mjs-Datei im Stammverzeichnis Ihres Projekts und fügen Sie das @tailwindcss/postcss-Plugin zu Ihrer PostCSS-Konfiguration hinzu:

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Seit Tailwind v4 ist standardmäßig keine Konfiguration erforderlich. Falls Sie dennoch eine Konfiguration benötigen, können Sie der offiziellen Dokumentation für die Konfiguration der globalen CSS-Datei folgen.

Es gibt auch eine Upgrade-CLI und eine Anleitung, falls Sie ein bestehendes Tailwind-v3-Projekt haben.

Importieren von Styles

Fügen Sie die Tailwind-CSS-Direktiven, die Tailwind zum Injizieren der generierten Styles verwendet, zu einem globalen Stylesheet in Ihrer Anwendung hinzu, zum Beispiel:

@import 'tailwindcss';

Importieren Sie in der Custom-App-Datei (pages/_app.js) das globals.css-Stylesheet, um die Styles auf jede Route Ihrer Anwendung anzuwenden.

// Diese Styles gelten für jede Route in der Anwendung
import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

// Diese Styles gelten für jede Route in der Anwendung
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Verwendung von Klassen

Nach der Installation von Tailwind CSS und dem Hinzufügen der globalen Styles können Sie Tailwinds Utility-Klassen in Ihrer Anwendung verwenden.

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Hello, Next.js!</h1>
}

Verwendung mit Turbopack

Seit Next.js 13.1 werden Tailwind CSS und PostCSS mit Turbopack unterstützt.