Dans un article paru le 6 mars 2024 sur le blog officiel de TailwindCSS, Adam Wathan a présenté la nouvelle version du framework CSS. Cet article détaille les fonctionnalités intégrées dans la v4 et celles qui ont été retirées. Pour ceux qui ne sont pas encore au courant des changements, j'ai écrit un article ici qui résume bien le tout.

Entre la version stable actuelle 3.4.1 et la version 4-alpha, de nombreux changements ont été apportés. TailwindCSS v4.0.0 alpha se distingue des versions précédentes, notamment parce que le fichier de configuration n'est plus obligatoire. Dans cet article, je vais vous montrer comment utiliser la version 4 alpha dans différents projets.

Projet Vite

Selon Adam Wathan, utiliser Vite est le moyen le plus rapide et le plus efficace. TailwindCSS propose désormais son propre plugin ViteJS que vous pouvez installer facilement. Si vous avez commencé votre projet avec Vite, voici comment ajouter la version 4.0.0 alpha de TailwindCSS :

npm install tailwindcss@next @tailwindcss/vite@next

Ensuite, importez TailwindCSS dans le fichier de configuration Vite vite.config.js et déclarez-le dans les plugins :

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

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

Pour finir, ajoutez simplement :

@import 'tailwindcss';

dans votre fichier CSS global. Et voilà, vous pouvez maintenant essayer TailwindCSS dans votre projet Vite.

Projet Next.js et autres avec Postcss

Lorsque vous n'utilisez pas Vite, le processus reste similaire pour presque tous les autres frameworks. Prenons l'exemple de Next.js.

Commencez par créer un projet Next.js :

npm create next-app tailwind-v4

Répondez à toutes les questions. Lorsqu'on vous demande si vous souhaitez utiliser TailwindCSS, répondez non. Continuez et terminez la configuration.

npm install tailwindcss@next @tailwindcss/postcss@next

Créez un fichier postcss.config.js et ajoutez le code suivant :

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

Enfin, ajoutez TailwindCSS dans votre fichier CSS global :

@import 'tailwindcss';

Avant d'aller plus loin, j'aimerais vous informer qu'une vaste sélection de templates gratuits TailwindCSS est disponible pour vos différents projets. Après avoir exploré le web, j'ai sélectionné pour vous les meilleurs templates.

Dans un projet Node.js...

Pour un projet Node.js ou similaire, il est nécessaire d'installer le nouveau CLI de TailwindCSS. Ensuite, compilez manuellement le CSS et utilisez le CSS compilé dans un fichier de sortie. En supposant que votre projet Node.js est déjà configuré, suivez les étapes suivantes :

npm install tailwindcss@next @tailwindcss/cli@next

Créez un fichier d'entrée CSS que je vais nommer input.css. Dans ce fichier, importez TailwindCSS :

@import 'tailwindcss';

Depuis le terminal, compilez le CSS en exécutant :

npx @tailwindcss/cli@next -i chemin/vers/input.css -o chemin/vers/output.css

où output.css est le fichier qui contiendra le CSS compilé. N'oubliez pas de l'ajouter à vos fichiers HTML.

Pour compiler automatiquement lors de modifications, vous pouvez combiner Concurrently et Nodemon.

Plus de fichier tailwind.config.js

Pour utiliser des valeurs personnalisées dans la v4 alpha, vous devez ajouter un objet @theme directement dans le fichier CSS où TailwindCSS a été importé. Voici comment procéder :

@import 'tailwindcss';
@import 'tailwindcss/preflight' layer(base);
@import 'tailwindcss/utilities' layer(utilities);

@theme {
  --color-*: initial;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  /* ... */
  --color-green-800: #3f6212;
  --color-green-900: #365314;
  --color-green-950: #1a2e05;
}

Consultez le répertoire Git du projet pour voir toutes les valeurs par défaut et les noms des champs que vous pouvez ajouter dans l'objet @theme().

Maintenant, je vous ai montré plusieurs façons d'utiliser TailwindCSS v4 dans les projets React, Node.js, Next.js, et Vue...