Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 possible to use both of them at same time?

Thank you.

like image 905
xyingsoft Avatar asked Jul 02 '20 02:07

xyingsoft


People also ask

Can I use both Bootstrap and Tailwind together?

We can use both the CSS frameworks together but it is not recommended. Because few classes will contradict with each other like “container”, “clearfix”, etc. As we know that Bootstrap is a known CSS framework. Although the Tailwind CSS framework can also be used parallelly in comparison to Bootstrap.

Can I use Bootstrap and CSS at the same time?

Yes. You will want to put your additions in a separate file and link it below the bootstrap. css link. Then you can add your own classes and/or overwrite the Bootstrap classes in your own file.

Which is better Tailwind CSS or Bootstrap?

Bootstrap is much larger than Tailwind and requires multiple files to access its full functionality. Because of this, using Bootstrap means a significantly larger file size than Tailwind. Bootstrap also offers mobile-first, responsive components pre-styled to create flawless website pages quickly.

Is Tailwind easier than Bootstrap?

Websites created using Tailwind CSS are much more customizable. Websites created with Bootstraps are known for their responsiveness and flawless design, but the looks are generic and similar.


1 Answers

You can solve classes conflict using a prefix

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

BUT, most likely you will have a problem with normalize.css, which used in @tailwind base

like image 101
Ostap Brehin Avatar answered Oct 21 '22 05:10

Ostap Brehin