Maison  >  Questions et réponses  >  le corps du texte

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

<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>
P粉933003350P粉933003350441 Il y a quelques jours592

répondre à tous(1)je répondrai

  • P粉191323236

    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.

    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.

    répondre
    0
  • Annulerrépondre