How to use TailwindCSS & Bootstrap in the same project

Hello Developers!
TailwindCSS has been a favorites css framework for me since I knew about it. I rarely use any other css framework such as Bootstrap. However, we can't deny the fact that bootstrap has many features that we can't neglect such as modals, tooltips, navs & tabs and much more that makes the web development experience very joyful.

But now many developers are confused that how can take advantage of the both worlds. If we embed both frameworks into our project then there will be classes' conflicts such mx-2 py-4 and much more.

In this blog, we are going to see how you can embed both css frameworks into your project without creating any conflict.

Keep in mind that we can't change the css classes for bootstrap but what we can is that we can add a prefix to tailwindCSS classes after the new updates of tailwind.

So let's see how we can do that.

Here is the code to add 'tw-' prefix if you are using tailwindCSS CDN.

TailwindCSS CDN

  <script>
    tailwind.config = {
      prefix: "tw-",
      corePlugins: {
         preflight: false,
      }
    }
  </script>

However, if you have installed tailwindcss into your project through npm or any other package manager, then you can use the following code into your tailwind.config.js

module.exports = {
    content: ["./**/*.html"],
    prefix: "tw-",
    important: true,
    corePlugins: {
        preflight: false,
    }
}

Now whenever you using tailwindcss classes, you need to add 'tw-' before classes. For example, py-2 will be tw-py-2.
That's how easy it is to use tailwindcss and bootstrap in the same project.

Reference

https://developerwings.com/tailwind-and-bootstrap-together/