Types pour la configuration Tailwind-CSS

Comment utiliser les types Typescript pour Tailwind-CSS

Utilisation de Typescript pour la configuration Tailwind-CSS

Tailwind est livré avec des types pour son fichier de configuration. Pour les utiliser, il vous suffit de suivre les deux étapes simples suivantes.

Mise à jour vers Tailwind-CSS 3.1 ou supérieur

La première exigence est de mettre à jour votre dépendance Tailwind-CSS vers une version au moins 3.1, car c'est la version qui a commencé à être livrée avec les types.

Mettez à jour votre fichier de configuration

La deuxième et dernière étape consiste à ajouter un seul commentaire spécial, appelé "annotation de type", à votre configuration exportée. Une grande caractéristique de Typescript est qu'il peut même être utilisé dans des fichiers Javascript. Tant qu'un module contenant les types peut être référencé, votre IDE peut utiliser ces métadonnées pour l'auto-complétion de la vérification des types.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // The source of your files, e.g. "./src/**/*.{html,js,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Et avec ces petits changements, vous disposez désormais d'une prise en charge de type de première classe pour votre configuration Tailwind-CSS.