Tailwind CSS

Tailwind CSS ist ein Utility-First-CSS-Framework, das hervorragend mit Next.js funktioniert.

Tailwind installieren

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:

Terminal

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

Tailwind konfigurieren

Fügen Sie in Ihrer Tailwind-Konfigurationsdatei Pfade zu den Dateien hinzu, die Tailwind-Klassennamen verwenden werden:

tailwind.config.ts

import type { Config } from 'tailwindcss'
 
const config: Config = {
  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 wenn das `src`-Verzeichnis verwendet wird:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
export default config

tailwind.config.js

/** @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 wenn das `src`-Verzeichnis verwendet wird:
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Sie müssen postcss.config.js nicht modifizieren.

Stile importieren

Fügen Sie die Tailwind CSS-Direktiven, die Tailwind zum Einfügen seiner generierten Stile verwendet, zu einem globalen Stylesheet in Ihrer Anwendung hinzu, zum Beispiel:

app/globals.css

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

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

app/layout.tsx

TypeScript

import type { Metadata } from 'next'
 
// Diese Stile werden auf jede Route in der Anwendung angewendet
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>
  )
}

Klassen verwenden

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

app/page.tsx

TypeScript

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.