4

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?

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
M. Azyoksul
  • 1,580
  • 2
  • 16
  • 43

3 Answers3

5

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?

BENMEDDAH Mohamed
  • 201
  • 3
  • 5
4

When you use both bootstrap and tailwind-css at the same time, you will face naming conflicts which will lead to undefined behavior ,

There are two ways to overcome .

  • First way is to solve is by using prefix option in your tailwind.config.css file

     // tailwind.config.js
    module.exports = {
       prefix: 'tw-',
    }

So now you can use the prefix tw- before the class name of tailwind-css which wont break any of your existing styles.

  • If you are facing problem in changing of the overall changes caused by adding tailwind-css to the existing bootstrap project setting off the preflight of tailwind-css would be preferred.

Preflight by default in their projects which is an opinionated set of base styles.

And this is build on top of modern-normalize

And Tailwind automatically injects these styles in @tailwind base.

So to overcome this .Remove @tailwind base from the css file or Add preflight: false,

module.exports = {
   corePlugins: {
      preflight: false,
   }
}

Hope it helps!

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
0

You can use Prefix, with the latest update of Tailwind you can do that with the CDN as well.

Please refer to this link: https://developerwings.com/tailwind-and-bootstrap-together/

Kachkol Asa
  • 367
  • 3
  • 6