Tailwind CSS
Tailwind CSS est un framework CSS utility-first qui fonctionne exceptionnellement bien avec Next.js.
Installation de Tailwind
Installez les packages Tailwind CSS et exécutez la commande init pour générer les fichiers tailwind.config.js et postcss.config.js :
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pConfiguration de Tailwind
Dans tailwind.config.js, ajoutez les chemins vers les fichiers qui utiliseront les classes Tailwind CSS :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}', // Notez l'ajout du répertoire `app`.
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
// Ou si vous utilisez le répertoire `src` :
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
}Vous n'avez pas besoin de modifier postcss.config.js.
Importation des styles
Ajoutez les directives Tailwind CSS que Tailwind utilisera pour injecter ses styles générés dans une feuille de style globale de votre application, par exemple :
@tailwind base;
@tailwind components;
@tailwind utilities;Dans le layout racine (app/layout.tsx), importez la feuille de style globals.css pour appliquer les styles à chaque route de votre application.
import type { Metadata } from 'next'
// Ces styles s'appliquent à chaque route de l'application
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>
)
}// Ces styles s'appliquent à chaque route de l'application
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>
)
}Utilisation des classes
Après avoir installé Tailwind CSS et ajouté les styles globaux, vous pouvez utiliser les classes utilitaires de Tailwind dans votre application.
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>
}Utilisation avec Turbopack
Depuis Next.js 13.1, Tailwind CSS et PostCSS sont pris en charge avec Turbopack.