Comment installer Tailwind CSS dans votre application Next.js

Tailwind CSS est un framework CSS utility-first entièrement compatible avec Next.js. Ce guide vous explique comment installer Tailwind CSS dans votre application Next.js.

Installation de Tailwind

Installez les paquets nécessaires de Tailwind CSS :

Terminal

npm install -D tailwindcss @tailwindcss/postcss postcss

Bon à savoir : Si vous utilisez l'interface en ligne de commande create-next-app pour créer votre projet, Next.js vous demandera si vous souhaitez installer Tailwind et configurera automatiquement le projet.

Configuration de Tailwind

Créez un fichier postcss.config.mjs à la racine de votre projet et ajoutez le plugin @tailwindcss/postcss à votre configuration PostCSS :

postcss.config.mjs

/** @type {import('tailwindcss').Config} */
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Depuis Tailwind v4, aucune configuration n'est requise par défaut. Si vous avez besoin de configurer Tailwind, vous pouvez suivre la documentation officielle pour configurer le fichier CSS global.

Il existe également un CLI de mise à niveau et un guide si vous avez un projet existant avec Tailwind v3.

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 :

app/globals.css

@import 'tailwindcss';

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>
  )
}

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>
}

Utilisation avec Turbopack

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