Principe et installation

Ce que tu vas apprendre

• Ce qu'est une classe utilitaire et en quoi c'est différent du CSS classique.
• Installer Tailwind CSS 4 avec Vite, puis dans un projet Nuxt.
• Savoir où Nuxt UI se place par rapport à Tailwind.

Du CSS classique aux classes utilitaires

Voici une carte de recette stylée avec Tailwind :

<article class="rounded-lg border p-4 shadow-md">
  <h2 class="text-xl font-bold">Crêpes au citron</h2>
  <p class="text-gray-600">Prêtes en 15 minutes.</p>
</article>

Chaque classe fait une seule chose : p-4 ajoute du remplissage, font-bold met en gras, rounded-lg arrondit les coins. On appelle ça des classes utilitaires.

Tu ne nommes plus tes classes et tu n'écris presque plus de fichier CSS. Tu composes le style directement dans le HTML.

Pourquoi ça marche bien

Avec du CSS classique, tu inventes un nom (.carte-recette), puis tu le retrouves dans un fichier à part. Avec Tailwind, tu lis le style en regardant l'élément.

Le HTML devient plus long, c'est le prix à payer. Le chapitre 6 montre comment éviter de te répéter.

Installer avec Vite

Vite est l'outil qui lance et compile ton projet pendant le développement. Pour y ajouter Tailwind CSS 4, il faut trois étapes.

1. Installe les deux paquets :

npm install tailwindcss @tailwindcss/vite

2. Ajoute le plugin dans la configuration de Vite :

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

3. Dans ton fichier CSS principal, importe Tailwind :

@import "tailwindcss";

Charge ensuite ce fichier dans ta page, par exemple avec <link href="/src/style.css" rel="stylesheet"> dans le <head>. Tu peux alors utiliser les classes.

Cette ligne @import "tailwindcss"; est toute la configuration de départ. Tailwind 4 n'a plus besoin d'un fichier tailwind.config.js par défaut : la personnalisation se fait dans le CSS (chapitre 5).

Installer dans Nuxt

Dans un projet Nuxt, le plugin Vite se déclare dans nuxt.config.ts, car Nuxt s'appuie sur Vite.

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
})

Installe d'abord les mêmes paquets (npm install tailwindcss @tailwindcss/vite), puis crée le fichier CSS :

@import "tailwindcss";

La ligne css de la configuration charge ce fichier sur toutes les pages. Tu peux écrire des classes dans n'importe quel composant :

<template>
  <h1 class="text-3xl font-bold underline">Mes recettes</h1>
</template>

Et Nuxt UI ?

Nuxt UI est une bibliothèque de composants prêts à l'emploi pour Nuxt, construite sur Tailwind CSS. Elle s'installe à la place de la configuration précédente, avec tailwindcss comme dépendance :

npm install @nuxt/ui tailwindcss

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

@import "tailwindcss";
@import "@nuxt/ui";

Il faut aussi envelopper l'application dans le composant UApp :

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Dans la procédure de Nuxt UI, la configuration ne déclare que le module et le fichier CSS, sans le plugin @tailwindcss/vite de la section précédente. Tes propres classes Tailwind s'écrivent comme d'habitude.

Vérifier que ça marche

Lance le serveur de développement avec npm run dev, puis affiche une page contenant text-3xl font-bold underline. Le texte doit apparaître grand, gras et souligné.

Si rien ne change, vérifie trois points : le fichier CSS est bien chargé, il contient @import "tailwindcss";, et le plugin est déclaré.

À retenir

• Une classe utilitaire fait une seule chose et se compose directement dans le HTML.
• Tailwind génère du CSS ordinaire : les connaissances en CSS restent utiles.
• Avec Vite : npm install tailwindcss @tailwindcss/vite, le plugin tailwindcss() et @import "tailwindcss";.
• Dans Nuxt, le plugin va dans vite.config.plugins de nuxt.config.ts, et le fichier CSS dans css.
• Nuxt UI s'installe avec @nuxt/ui, importe @nuxt/ui dans le CSS et demande d'envelopper l'app dans UApp.