How to use both Tailwind CSS and Bootstrap 4 at the same time ?

Last Updated : 24 Dec, 2021

In this article, we will know how to use Bootstrap with Tailwind CSS, at a moment, in the same code. 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. Tailwind CSS is basically a utility-first CSS framework that facilitates rapidly building custom user interfaces. So, in the development field, it is more familiar with the Tailwind rather than Bootstrap. There are significant differences in the Tailwind CSS vs Bootstrap.

Suppose there is a pre-build website where the old developers have used Bootstrap and the new developers want to use Tailwind. In that case, the new developer has to be careful with the used Bootstrap classes, where the classes should not contradict each other. We will be using the below CDN links in the code example in order to use the various applicable Bootstrap & Tailwind CSS classes, & utilize them on a single page.

Bootstrap CDN Link:

<link rel=”stylesheet” href=“ https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=“ https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=“ https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>
<script src=“ https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

Tailwind CSS CDN Link:

<link href=“ https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=”stylesheet”>

Example: In this example, we will use Bootstrap for content alignment, & for text and background color, we will use Tailwind CSS. So both the frameworks will applicable.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <!-- Bootstrap CDN Links -->
    <link rel="stylesheet"
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
    </script>
 
    <!-- Tailwind CSS CDN Links -->
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet"> 
</head>
 
<body>
   
    <!-- Bootstrap Class -->
    <div class="col">
        <div class="col-md-4">
           
            <!-- Tailwind CSS Class -->
            <p class="bg-purple-300 p-2"> 
                <b class="text-green-700">GeeksforGeeks</b>
                <br>This example illustrates the use of 
                    Bootstrap and Tailwind side by side.
            </p>
 
        </div>
    </div>
</body>
 
</html>