I’m embedding a React application styled with Tailwind CSS into a larger CMS app that uses Bootstrap. Naturally, there are utility class conflicts between the two frameworks.
To resolve this, I tried enabling the !important option in my Tailwind config like this:
js Copy Edit module.exports = { important: true, } However, this causes layout issues since Bootstrap’s !important rules still override my Tailwind styles.
I also tried the selector strategy using:
js Copy Edit important: ‘.tailwind-app’ But even then, some Bootstrap styles with !important are still taking precedence.
My goal is to increase specificity AND apply !important to all Tailwind classes, so Tailwind rules win without altering the component library that I’m importing.
Is there a supported way to combine both strategies, e.g. scope Tailwind under a selector like .tailwind-app and apply !important to every utility class? Looking for clean solutions that preserve styles from external components without prefixing everything manually.
(Ref: Tailwind CSS GitHub Discussion #5080) (How to increase the specificity of tailwind util classes · tailwindlabs/tailwindcss · Discussion #5080 · GitHub)