Can use both Tailwind css and Bootstrap 4 at the same time?

Question

My project is currently Vuejs which use BootstrapVue components (seems to use bootstrap 4 css).

I am trying to use Tailwind css for new custom components.

Is it po

Answer 1

Possible, Yes. Is it recommended, NO.

There are many classes that are gonna contradict with each other e.g.

.container (Bootstrap)
.container (Tailwind)

.clearfix (B)
.clearfix (T)

And the list goes on...

---

My advice would be to either stick with BootstrapVue or Tailwind. My personal preference, Tailwind.

Answer 2

You can solve classes conflict using a prefix

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

Note: probably you will have a problem with normalize.css, which used in @tailwind base

Answer 3

As long as there's no name collision in 2 libs (which I don't think they are), they will work just fine.

But I don't think you should. Because it will break the unification of the project and will make it harder to maintain.