Maison > Questions et réponses > le corps du texte
P粉1913232362023-08-28 00:23:31
Il s'agit d'un problème connu avec tailwindcss et les classes dynamiques, car la classe est appliquée après le rendu, son effet ne sera pas généré par tailwind à moins qu'il n'y ait un autre élément avec la même classe que la classe statique.
Vous pouvez donc utiliser la "liste sûre" de tailwind pour résoudre ce problème. Dans votre tailwind.config, définissez un tableau de liste sûre contenant toutes les classes tailwind que vous devez générer et qui n'existent pas en tant que classes statiques dans votre code.
tailwind.config.js :
module.exports = { content: [ './pages/**/*.{html,js}', './components/**/*.{html,js}', ], safelist: [ 'from-red-500', 'from-orange-500', 'from-yellow-500', 'from-green-500', 'from-cyan-500', 'from-blue-500', 'from-indigo-500', 'from-violet-500', 'from-purple-500', 'from-pink-500', ] // ... }
Désormais, ces classes seront toujours générées, donc lorsque vous les appliquerez dynamiquement, elles changeront en conséquence.
Veuillez noter que vous devez redémarrer le serveur après l'ajout à la liste sûre.
Une autre solution manuelle consiste à créer un élément caché et à y ajouter toutes les classes requises afin qu'elles soient générées même si vous les obtenez dynamiquement après le rendu.
<div className="hidden from-red-500"></div>
Mais je pense que la liste sûre est meilleure.