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.

How to use Tailwind and Bootstrap together

What is TailwindCSS?

TailwindCSS is an utility-based CSS framework that scans all of your files in your project, including HTML and JS and then creates a static CSS files 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 to add your CSS values within your class.

For instance, if I want to add a 2px of padding but all the tailwind padding classes does 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 to your static CSS file.

Tailwind is fully extendable , you can add custom colors, 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 very old time unlike TailwindCSS. It includes not only CSS but also JavaScript component 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 much javascript codes for every click. It includes, components like modal, tabs, dropdowns, accordions and much more that uses CSS and JS to complete that component.

Bootstrap allows you to edit the colors but it does not allows you to add new colors 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’s obviously is but It depends on what version of TailwindCSS you are using. If you are using a earlier version of TailwindCSS (v3+) then you can use them both without causing any problems.

In the latest version of TailwindCSS, it 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 basic information.

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

How to 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 depends on how you are using Tailwind. Either it’s using CDN or you have 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 applies 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 applies to the states, for example if you want to add a p-2 on hover, then your class should be hover:tw-p-2.

And that’s a wrap.

How to use Tailwind and Bootstrap together

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

Happy coding!

Leave a Comment

Index