Tailwind CSS

Tailwind CSS est un framework CSS axé sur les utilitaires 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 -p

Configuration 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 fichier app personnalisé (pages/_app.js), importez la feuille de style globals.css pour appliquer les styles à chaque route de votre application.

// Ces styles s'appliquent à chaque route de l'application
import '@/styles/globals.css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

// Ces styles s'appliquent à chaque route de l'application
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

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">Bonjour, Next.js !</h1>
}

export default function Page() {
  return <h1 className="text-3xl font-bold underline">Bonjour, Next.js !</h1>
}

Utilisation avec Turbopack

Depuis Next.js 13.1, Tailwind CSS et PostCSS sont pris en charge avec Turbopack.