Migration du blog VitePress vers Tailwind CSS Version 4

Depuis le premier épisode de cette série, Tailwind CSS a publié une nouvelle version majeure, apportant de nombreuses nouvelles fonctionnalités et améliorations. Dans cet épisode, nous allons migrer notre blog VitePress vers Tailwind CSS 4.0. Ce processus est plus simple que vous ne le pensez et nous permettra d'utiliser les dernières fonctionnalités de Tailwind CSS tout en maintenant notre blog à jour.

Mise à jour des dépendances ​

Tout d'abord, nous devons mettre à jour nos dépendances. Pour ce faire, j'aime utiliser taze, mais comme nous ne mettons à jour que Tailwind CSS, nous pouvons le faire manuellement. Ouvrez votre fichier package.json et mettez à jour les dépendances suivantes :

{
  "devDependencies": {
    "tailwindcss": "^4.1.5", 
    "@tailwindcss/vite": "^4.1.5", 
    "autoprefixer": "^10.4.20", 
    "postcss": "^8.5.1"
  }
}

Ensuite, exécutez la commande suivante pour installer les nouvelles dépendances :

pnpm install

Il y a plusieurs choses à noter avec ce changement. Tout d'abord, il y a une nouvelle dépendance appelée @tailwindcss/vite, qui est le nouveau plugin Vite pour Tailwind CSS, simplifiant le processus d'installation. De plus, les dépendances autoprefixer et postcss ne sont désormais plus nécessaires.

Cela signifie que le fichier postcss.config.cjs peut être supprimé en toute sécurité, car Tailwind CSS s'appuie désormais sur Vite pour le traitement CSS. Ce changement améliore à la fois les performances et l'expérience des développeurs, c'est l'une des meilleures caractéristiques de cette nouvelle version.

Utiliser le nouveau plugin Vite ​

Un nouveau plugin Vite signifie que nous devons mettre à jour notre configuration VitePress pour l'utiliser. Ouvrez votre fichier .vitepress/config.mts et mettez à jour le code suivant :

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

export default defineConfig({
  vite: {
    plugins: [
      Tailwind() 
    ]
  }
})

Et c'est tout !

Mise à jour de l'utilisation de Tailwind CSS ​

Maintenant que nous avons mis à jour nos dépendances et la configuration de VitePress, nous devons mettre à jour l'utilisation de Tailwind CSS dans notre fichier app.css. Dans sa dernière version, Tailwind CSS est passé à une configuration basée sur CSS, simplifiant le processus d'installation. Cela signifie que nous devons mettre à jour notre fichier app.css.

De :

@tailwind base;
@tailwind components;
@tailwind utilities;

À :

@import 'tailwindcss';

Au lieu de s'appuyer sur des directives CSS personnalisées, nous pouvons désormais utiliser la directive native @import pour incorporer Tailwind CSS.

Ensuite, nous migrons notre configuration vers la nouvelle configuration basée sur CSS.

@config "../../../../tailwind.config.cjs";

@plugin "@tailwindcss/typography";

@source '../../../../src/**/*.md';
@source '../../**/*.{vue,ts}';

En théorie, nous pourrions complètement supprimer le fichier de configuration JavaScript actuel, mais comme nous utilisons le plugin @tailwindcss/typography, nous devons le conserver.

Cependant, nous pouvons tout de même supprimer les propriétés content et plugins du fichier de configuration.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.md', './.vitepress/theme/**/*.{vue,ts}'], 
  theme: {
    extend: {
      typography: {
        // ...
      },
    },
  },

  plugins: [require('@tailwindcss/typography')], 
}

Et c'est tout ! Nous utilisons désormais la dernière version de Tailwind CSS dans notre blog VitePress !

J'espère que vous avez apprécié cet aperçu de la migration qui garantit que notre blog reste à jour pour nous permettre d'utiliser les dernières fonctionnalités de Tailwind CSS.