Un projet sur lequel j'ai travaillé récemment utilise Vite, Vue et Tailwind.

Après un certain temps à travailler avec des couleurs personnalisées, j'ai été confronté à une certaine confusion.

L'ajout et l'utilisation de couleurs personnalisées dans un modèle n'étaient pas le problème - le processus est rendu très clair à l'aide de la documentation Tailwind

// tailwind.config.js
module.exports = {
    theme: {
        colors: {
          'custom-green': {
              50: '#9bd1b2',
              ...
              700: '#284735'
          },
        }
    }
}

Mon problème était lors de l'utilisation des couleurs personnalisées avec des classes CSS dynamiques et statiques dans le modèle Vue.

Lors de l'exécution du projet avec npm, exécutez dev ou vite, le bg-custom-green-50 ou text-custom-green-50 n'a pas fonctionné et n'est jamais apparu dans les fichiers CSS.

Je crois comprendre que si le nom complet de votre classe CSS n'existe pas dans le modèle, Tailwind ne l'ajoutera pas ni ne le générera dans le fichier CSS.

En supposant que les classes CSS : text-custom-green-50 ou bg-custom-green-50 ne sont utilisées nulle part ailleurs dans le projet

L'exemple ci-dessous ne fonctionnera pas

L'exemple ci-dessous fonctionnera

La différence entre les deux exemples est que la classe CSS text-custom-green est ajoutée au modèle afin que tailwind l'ajoute au fichier CSS généré.

Pour surmonter ce problème, vous pouvez ajouter des couleurs personnalisées ou des classes tailwind à une liste sûre dans votre fichier tailwind.config.js.

// tailwind.config.js
module.exports = {
    safelist: [
        'text-custom-green-50',
        'bg-custom-green-50'
    ]
}

Ces couleurs seront disponibles même si elles ne sont pas utilisées directement dans un modèle, mais ajoutées dynamiquement à un autre moment

J'espère que quelqu'un d'autre trouvera cela utile.