Can use both Tailwind css and Bootstrap 4 at the same time?

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

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.

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: [],
}

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.