So installieren Sie Tailwind CSS in Ihrer Next.js-Anwendung

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:

Terminal

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:

postcss.config.mjs

/** @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:

app/globals.css

@import 'tailwindcss';

Importieren Sie im Root-Layout (app/layout.tsx) das globals.css-Stylesheet, um die Styles auf jede Route Ihrer Anwendung anzuwenden.

import type { Metadata } from 'next'

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

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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.