How to use both Tailwind CSS and Bootstrap 4 at the same time ?
Jun 9, 2022
Answers (2)
Add Answer
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>
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
