Issue with changing flavour using React state when only 1 flavour is used in the code

[thelazt16]

So I have these light and dark theming where i changed the flavour depending on which mode is used, so at the 1st run there will be only 1 variant that was used, because of that when I changed the variant from latte to macchiato, it didn't take effect unless I it's reload or jsx file change (saving occur) which trigger tailwind postcss to rebuilt which i think might be the main problem here. It would also work if, I changed the jsx file manually to use a certain flavour in which case postcss built the css, and if I'm not doing yarn run dev again my code would work <div className={`theme-${themeOptions[flavour].flavour}`}>

So my current solution is just to declare all the class flavour without actually using it (basically declare it in a hidden tag).

<div hidden>
    <span className="theme-latte" />
    <span className="theme-frappe" />
    <span className="theme-macchiato" />
    <span className="theme-mocha" />
</div>

Is there other solution I could use? Or there's an option in the postcss configuration i could change? Thanks in advance.

[nekowinston]

If you're creating your class names dynamically, you need to safelist them in the Tailwind configuration.

/** @type {import('tailwindcss').Config} */
module.exports = {
  safelist: ['mocha', 'macchiato', 'frappe', 'latte']
}

[thelazt16]

thank you so much