When applying TailwindCSS styles in Next.js, I encounter the problem that the styles are not rendered.

Question

Using TailwindCSS to set the background cover, I extracted the color from the bookId (10 digits) in useEffect. The colors get updated and the component re-renders with the updated color values, but the background color of the rendered page is still the same color of its parent div.

const colors = [
    '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',
]

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

    useEffect(() => {
        const id = router.query.bookId
        const index = id.slice(-1) //Extract index from bookId
        const bgColor = colors[index]
        setColor(bgColor)
    }, [])

    return (
        <Fragment>
            {color ? (
                <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 justify-center p-4`}>
                            {props.children}
                        </section>
                    </div>
                </div>
            ) : (
                <p className='text-2xl'>Loading..</p>
            )}
        </Fragment>
    )
}

However, when I replace the color variable with a color value (say 'from-red-500'), the background color is visible in the rendered page.

I also tried replacing the setColor code in useEffect with getStaticProps, but the static version of the code didn't solve the problem (when using the color variable).

Thanks for any help.

Answer 1

This is a known issue with tailwindcss and dynamic classes, because the class is applied after rendering, its effect will not be generated by tailwind unless there is another element with the same class as the static class.

Therefore, you can use tailwind's "safelist" to solve this problem. In your tailwind.config, define a safelist array containing all the tailwind classes you need to generate that do not exist as static classes in your 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',
  ]
  // ...
}

Now these classes will always be generated, so when you apply them dynamically, they will change accordingly.

Please note that you need to restart the server after adding to safelist.

source

Another manual solution is to create a hidden element and add all required classes to it so that they are generated even if you get them dynamically after rendering.

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

But I think safelist is better.