Beim Anwenden von TailwindCSS-Stilen in Next.js tritt das Problem auf, dass die Stile nicht gerendert werden.

Question

Mit TailwindCSS habe ich die Hintergrundabdeckung festgelegt und die Farbe aus der bookId (10 Ziffern) in useEffect extrahiert. Die Farben werden aktualisiert und die Komponente wird mit den aktualisierten Farbwerten erneut gerendert, aber die Hintergrundfarbe der gerenderten Seite ist immer noch dieselbe Farbe wie das übergeordnete Div.

const farben = [
    'von-rot-500',
    'von-orange-500',
    'von-gelb-500',
    'von-grün-500',
    'von-cyan-500',
    'von-blau-500',
    'from-indigo-500',
    'von-violett-500',
    'von-lila-500',
    'from-pink-500',
]

Funktion BgCover(props) {
    const [color, setColor] = useState(null)
    const router = useRouter()

    useEffect(() => {
        const id = router.query.bookId
        const index = id.slice(-1) //Index aus bookId extrahieren
        const bgColor = farben[index]
        setColor(bgColor)
    }, [])

    zurückkehren (
        <Fragment>
            {Farbe ? (
                <div className='flex-grow scrollbar-hide select-none relative'>
                    <div className={`bg-gradient-to-b ${color} to-black`}>
                        <Abschnitt
                            className={`flex flex-col md:flex-row items-center justify-center p-4`}>
                            {props.children}
                        </Abschnitt>
                    </div>
                </div>
            ) : (
                <p className='text-2xl'>Laden..</p>
            )}
        </Fragment>
    )
}

Wenn ich jedoch die Farbvariable durch einen Farbwert ersetze (z. B. „from-red-500“), ist die Hintergrundfarbe auf der gerenderten Seite sichtbar.

Ich habe auch versucht, den setColor-Code in useEffect durch getStaticProps zu ersetzen, aber die statische Version des Codes hat das Problem nicht gelöst (bei Verwendung der Farbvariablen).

Danke für jede Hilfe.

Answer 1

这是tailwindcss和动态类的已知问题，因为类是在渲染后应用的，所以它的效果不会被tailwind生成，除非有另一个元素具有与静态类相同的类。

因此，您可以使用tailwind的"safelist"来解决这个问题。 在您的tailwind.config中，定义一个safelist数组，包含您需要生成的所有tailwind类，而这些类在您的代码中不存在作为静态类。

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

现在这些类将始终被生成，因此当您动态应用它们时，它们将相应地更改。

请注意，在添加到safelist后，您需要重新启动服务器。

来源

另一个手动解决方案是创建一个隐藏元素，并将所有所需的类添加到它中，这样即使在渲染后动态获取它们，它们也会被生成。

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

但我认为safelist更好。