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

Forums CSSHow to use both Tailwind CSS and Bootstrap 4 at the same time ?
Staff asked 6 months ago

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

Answers (2)

Add Answer
Umang Ramani Marked As Accepted
Staff answered 4 months ago

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.

 

<!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>

 

Staff answered 6 months ago

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

Subscribe

Select Categories