Can use both Tailwind CSS and Bootstrap at the same time?

Option 1: Adopt or recreate classes

If you only need one or two classes, for example from the color system of Tailwind, you could also copy them. Some characters would have to be masked, e.g:

// style.css

.hover\:text-blue-900:hover,
.text-blue-900 {
  color: #183f6d;
}

That's what I did at the beginning of a project, where bootstrap is the main framework. If it should be several colors and functions, you can also build this with SCSS quickly. In the long run, however, in my opinion, not the best and cleanest solution.

Example for this:

// style.scss

(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}

Full code (Github Gist)

Option 2: Integrate Tailwind

But as soon as more functionalities should be added, or you want to build it cleaner, you can do here with the prefix mentioned by the documentation as Ostap Brehin says.

// tailwind.config.js

module.exports = {
  prefix: 'tw-',
}

The normalized definitions can be removed by disabling preflight:

// tailwind.config.js

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

Better check the generated CSS file.

Here is my full tailwind.config.js file:

// tailwind.config.js

module.exports = {
    content: [
        './**/*.php',
        '../Resources/**/*.{html,js}',
    ],
    safelist: [
        'tw-bg-blue-800/75',
        {
            pattern: /(bg|text)-(blue)-(800)/,
            variants: ['hover'],
        },
    ],
    prefix: 'tw-',
    theme: {
        extend: {},
    },
    corePlugins: {
        preflight: false,
    },
    plugins: [],
}

Yes, you can use Tailwind and Bootstrap together.

However, you need to do some configuration to your tailwind. The first thing is to add a prefix and then turn off the preflight. And if you are not using Tailwind JIT then also make the important as true. If you are using Tailwind JIT then you can use "!" before the class to make it important. For example "!tw-block".

Here is a suitable configuration for Tailwind JIT/CDN:

  <script>
    tailwind.config = {
      prefix: "tw-",
      corePlugins: {
         preflight: false,
      }
    }
  </script>

If you are not using CDN, use this configuration:

module.exports = {
    content: ["./**/*.html"],
    prefix: "tw-",
    important: true,
    corePlugins: {
        preflight: false,
    }
}

I have written a whole blog on it: https://developerwings.com/tailwind-and-bootstrap-together/

Possible, Yes. Is it recommended, NO.

There are many classes that are gonna contradict with each other e.g.

.container (Bootstrap)
.container (Tailwind)

.clearfix (B)
.clearfix (T)

And the list goes on...

My advice would be to either stick with BootstrapVue or Tailwind. My personal preference, Tailwind.

As long as there's no name collision in 2 libs (which I don't think they are), they will work just fine.

But I don't think you should. Because it will break the unification of the project and will make it harder to maintain.

As other answers have pointed out, the TailwindCSS prefix system is perfectly suited to differentiate its own classes from those of other frameworks. However, the other answers were focused on TailwindCSS v3, and the declaration and use of prefixes has changed starting from v4.

Starting from TailwindCSS v4, class names are no longer extended; instead, the prefix appears as a main utility. It must be applied before everything else. The goal is to make it easier to distinguish TailwindCSS class names from custom class names when reading the code.

• TailwindCSS prefix - StackOverflow

From TailwindCSS v4 onwards

If you use a prefix, the following is valid. The prefix should be connected with a colon (:) rather than a hyphen (-). Additionally, the prefix should always be used as the first utility. By default, this would be tw:content, but due to other utilities, you need to gradually place the appropriate utilities in between.

• Using the prefix option

@import "tailwindcss" prefix(myprefix);

myprefix:text-red-500
myprefix:hover:text-red-500

• How to add tw- prefix to Tailwind CSS classes in Tailwind CSS v4? - StackOverflow

Preflight

TailwindCSS comes with a CSS reset and default settings. If you don't want to use this during shared usage, you should modify the TailwindCSS installation like this:

/* @import "tailwindcss"; */
/* This includes everything by itself, but if we need to use it without preflight, unfortunately, we will have to individually declare the necessary imports. */

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities);

• Base styles: Preflight - TailwindCSS v4 Docs
• How to reset specific container child tags from TailwindCSS styles - StackOverflow

Import TailwindCSS with important by default

In certain CSS specificity cases, Bootstrap may remain stronger than TailwindCSS.

• CSS Specificity - MDN Docs
• @layer priority - MDN Docs

To address this, it might be worth importing TailwindCSS with !important during the migration from Bootstrap to ensure its classes always remain stronger than those of Bootstrap.

• Using the important flag - TailwindCSS v4 Docs

@import "tailwindcss" important;

Or with prefix:

@import "tailwindcss" prefix(myprefix) important;

is there any bootstrap like opinionated library built on top of tailwind with all the components like alert, grid, btns, cards, collapse, etc. sometimes you don't want to leave the comfort of bootstrap but want tailwind utilities at the same time

That is pretty much what we were looking for. Finally found https://tw-elements.com/

Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities

It has an AGPL licence so you can use it for free as long as your project is open source.