How to use Tailwind and Bootstrap together

Using tailwind and bootstrap together has been a real problem for many developers but after the new version of Tailwind, it’s very easy to use tailwind and bootstrap together.

So let’s see how to use tailwind and bootstrap together, but first, let’s see what is TailwindCSS exactly and what is Bootstrap.

What is TailwindCSS?

TailwindCSS is a utility-based CSS framework that scans all of your files in your project, including HTML and JS, and then creates a static CSS file with all the CSS in it.

For instance, if we have a div with the class of ‘hidden’ then tailwind will scan your file and generate a CSS file that would include the following CSS.

.hidden{
    display: none;
}

With Tailwind, you don’t need to touch your CSS file ever, because everything you think of, Tailwind already has a class for it. If not, then you still don’t need to leave your HTML file because Tailwind allows adding your CSS values within your class.

For instance, if I want to add a 2px of padding but all the tailwind padding classes do not have that value of 2px. If I add p-1 class, it’s still not 2px so to solve this issue, you can use p-[2px] and tailwind will automatically read this class and generate the CSS and add it to your static CSS file.

Tailwind is fully extendable, you can add custom colours, classes, and redefine the classes’ values, and much more.

Personally, since I have been using TailwindCSS, I didn’t need any other CSS framework.

What is Bootstrap?

Bootstrap has been in the market for a very old time, unlike TailwindCSS. It includes not only CSS but also JavaScript components in it. And unlike TailwindCSS, it’s a component-based CSS framework. In the earlier version of Bootstrap, Bootstrap defines itself as a front-end toolkit.

Bootstrap is great if you don’t want to write so many javascript codes for every click. It includes components like modals, tabs, dropdowns, accordions, and much more that use CSS and JS to complete that component.

Bootstrap allows you to edit the colours but it does not allow you to add new colours but you can achieve that using custom CSS.

Now that you know about TailwindCSS and Bootstrap. You must be wondering what if I take advantage of both frameworks.

Is even using TailwindCSS and Bootstrap together possible?

Yes, it obviously is but It depends on what version of TailwindCSS you are using. If you are using an earlier version of TailwindCSS (v3+) then you can use them both without causing any problems.

The latest version of TailwindCSS, provides a JIT CDN which is the same thing as if you install TailwindCSS in your project. You can extend the theme and configure Tailwind’s basic information.

Let’s see how you can use TailwindCSS and Bootstrap together.

How to use TailwindCSS and Bootstrap together?

You can use them both in the same project at the same time. You just need to add a prefix to your tailwind classes and with the new versions of tailwindcss you can do that with even CDN.

There are two ways and both of them depend on how you are using Tailwind. Either it’s using CDN or you have to install Tailwind CLI. So let’s go through both of them.

Method 1: CDN

If you are using TailwindCSS through CDN then you can add a prefix to your tailwind classes like the following codes.

<script>
    tailwind.config = {
        prefix: "tw-"
    }
</script>

Important: Add this code in the head tag and make sure that you are now using the classes with the prefix. Now if you want to add a p-1 class then it should be tw-p-1 now. But it does not apply to the states, for example, if you want to add a p-2 on hover, then your class should be hover:tw-p-2.

Method 2: Tailwind CLI

If you are using Tailwind CLI then you should have a tailwind.config.js in your root folder or somewhere in your project. Find that, and change it by adding a prefix element to it. Like the codes below.

module.exports = {
    content: ["./**/*.html"],
    prefix: "tw-",
    theme: {
      extend: {},
    },
    plugins: [],
}

Important: Make sure that you are now using the classes with the prefix. Now if you want to add a p-1 class then it should be tw-p-1 now. But it does not apply to the states, for example, if you want to add a p-2 on hover, then your class should be hover:tw-p-2.

FAQ regarding using Tailwind and Bootstrap together

Can I use tailwind and bootstrap together?

Yes, definitely you can. You just need to add a prefix to the tailwind configuration. We have covered it in this blog.

Can I mix Bootstrap and Tailwind together?

Yes, you can. There are a lot of ways you can do that, but the best practice will be configuring your tailwind to add a prefix to your tailwind classes.

And that’s a wrap.

It’s that simple. I hope I was able to help you with using TailwindCSS and Bootstrap together on your project.

Happy coding!