Lors de l'application des styles TailwindCSS dans Next.js, je rencontre le problème que les styles ne sont pas rendus.

Question

En utilisant TailwindCSS pour définir la couverture d'arrière-plan, j'ai extrait la couleur du bookId (10 chiffres) dans useEffect. Les couleurs sont mises à jour et le composant est restitué avec les valeurs de couleur mises à jour, mais la couleur d'arrière-plan de la page rendue est toujours la même couleur que celle de son div parent.

const couleurs = [
    'du-rouge-500',
    'à partir d'orange-500',
    'du-jaune-500',
    'du-vert-500',
    'de-cyan-500',
    'du-bleu-500',
    'de-indigo-500',
    'de-violet-500',
    'du-violet-500',
    'du-rose-500',
]

fonction BgCover(accessoires) {
    const [couleur, setColor] = useState (null)
    const routeur = useRouter()

    useEffect(() => {
        const id = routeur.query.bookId
        const index = id.slice(-1) //Extraire l'index de bookId
        const bgColor = couleurs[index]
        setColor(bgColor)
    }, [])

    retour (
        
            {couleur ? (
                

                    

                        

                            {accessoires.enfants}
                        ≪/section>
                    
                
            ) : (
                
Chargement en cours...
            )}
        
    )
}
Cependant, lorsque je remplace la variable de couleur par une valeur de couleur (par exemple « from-red-500 »), la couleur d'arrière-plan est visible dans la page rendue. 
J'ai également essayé de remplacer le code setColor dans useEffect par getStaticProps, mais la version statique du code n'a pas résolu le problème (lors de l'utilisation de la variable color). 
Merci pour toute aide. 
            

Answer 1

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.

Source

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.