Search code examples
cssuser-interfacebootstrap-4tailwind-css

How to resolve Tailwind and Bootstrap conflicts in an Angular project

I am using Tailwind CSS and Bootstrap (ngx-bootstrap) in the same Angular project. For the most part, they play along nicely. However, when it comes to padding and margins, they fight like siblings. I want to use Tailwind for padding because it is consistent. For example, the class p-X is X times 0.25 rem but with bootstrap, it is all over the place. The annoying thing is that Bootstrap puts !important everywhere.

utilities.css comes from Tailwind and _spacing.scss comes from Bootstrap.

padding 3

padding 4

padding 5

Is there a convenient way to solve this?

Solution

  • The best practice to avoid naming conflicts with Tailwind utility classes is using prefix option on your tailwind.config.js file.

    module.exports = {
  prefix: 'tw-',
}

    But if you want only to put !important rule for Tailwind classes, and you have already control the order of css code (tailwind classes are the last), you can set the important option to true on the tailwind config file.

    module.exports = {
  important: true,
}

    Make sur to not override tailwind classes when you're choosing to set the important option only, see What is the order of precedence for CSS?