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 -pKonfiguration 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 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 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.