When I added custom npm package-built with Tailwind CSS-to a React project that already used Bootstrap, some Tailwind styled were unexpectedly overridden.
- Add a prefix to Tailwind CSS utilities in the npm package.
- Confiture style layer order in the consuming project to prioritize Tailwind utilities over Bootstrap.
- Optionally, use Tailwind’s
!(important) syntax for specific cases.
To avoid class name conflicts, I confitured Tailwind in my npm package with a prefix, like this.
@import "tailwindcss" prefix(tw);
This means that instead of writing text-center, I now write tw:text-center.
Even with a prefix, some Tailwind styles were still overridden-especialy dynamic or calculated values like: h-[calc(45/16*1rem)].
To ensure Tailwind utilities take precedence, I modified the import order and layer assignments in the consuming project:
@import "tailwindcss";
@import "bootstrap/dist/css/bootstrap.min.css" layer(components);
This gives Tailwind’s utility classes higher specificity in the cascade.
For isolated cases, you can apply Tailwind’s utility classes with the ! prefix.
className="!no-underline"
This forces Tailwind’s rule to override any conflicting Bootstrap style.
If you’re mixing Tailwind CSS and Bootstrap, consider:
- Adding a
prefixto Tailwind in your package. - Managing style priority with proper layering.
- Using
!for selective enforcement.
This way, you can confidently share Tailwind-styled components-even in environments where Bootstrap is already present.