TailwindCSS styles not rendered when applied dynamically in NextJs

To set the background cover using TailwindCSS I have extracted the color from bookId (10 digit number) inside useEffect. The color gets updated and component re-renders with the updated color value but the background color on the rendered page is still the same 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 the 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>
	)
}

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

I have also tried to replace the setColor code in useEffect with getStaticProps but the static version of the code cannot solve this problem (when color varible is used).

Thanks for any help.

This is a known issue with tailwindcss and dynamic classes, because the class is applied after rendering so its effect won't be generated by tailwind unless there was another element in that had the same class as a static class.

So, you can use tailwind "safelist" to resolve this.
In your tailwind.config, define a safelist array of all tailwind classes that you need to be generated and that don't exist in your code as static classes.

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 this classes will always get generated so when you apply them dynamically, they will change accordingly.

Note that you need to restart your server after adding to the safelist.

Source

Another manual solution is to make a hidden element and add all your needed classes to it so they will be generated even if you get them dynamically after render

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

but safelist is better I think