<p>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. </p> <pre class="brush:php;toolbar:false;">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 ( <Fragment> {couleur ? ( <div className='flex-grow scrollbar-hide select-none relative'> <div className={`bg-gradient-to-b ${color} to-black`}> <section className={`flex flex-col md:flex-row items-center justifier-centre p-4`}> {accessoires.enfants} ≪/section> </div> </div> ) : ( <p className='text-2xl'>Chargement en cours...</p> )} </Fragment> ) }</pré> <p>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. </p> <p>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). </p> <p>Merci pour toute aide. </p>

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',
  ]
  // ...
}

<div className="hidden from-red-500"></div>