Tailwind CSS

Tailwind CSS ist ein Utility-First-CSS-Framework, das besonders gut mit Next.js zusammenarbeitet.

Installation von Tailwind

Installieren Sie die Tailwind-CSS-Pakete und führen Sie den init-Befehl aus, um sowohl die tailwind.config.js als auch die postcss.config.js Dateien zu generieren:

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

Konfiguration von Tailwind

Fügen Sie in der tailwind.config.js die Pfade zu den Dateien hinzu, die Tailwind-CSS-Klassen verwenden werden:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}', // Beachten Sie die Hinzufügung des `app`-Verzeichnisses.
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',

    // Oder bei Verwendung des `src`-Verzeichnisses:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Die postcss.config.js muss nicht modifiziert werden.

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:

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

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 die Utility-Klassen von Tailwind 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

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