Menu
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.
905
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.
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.
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.
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.
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
101
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
