Gradually adding Tailwind to a Bootstrap project without breaking anything.

Tailwind lets you make custom designs very easily and provides great developer experience. After using it, a lot of developers wish their existing projects were written in Tailwind. Luckily, there's a very easy way to start using Tailwind's utility classes in your existing project without having to rewrite everything.

There are only two things you need to do.

Disabling the base styles

The @tailwind base directive mentioned in the Tailwind installation docs adds styles that change how things look before you apply any classes on them. It's a slightly modified version of normalize.css.

This would interfere with Bootstrap's base styles, and we only want the utility classes, so remove the @tailwind base directive from your CSS file.

Setting a prefix on Tailwind utility classes

Tailwind lets you set a prefix that will be applied on all utility classes.

I suggest using _, because everything will be still short & readable (e.g. _bg-gray-100, _flex _flex-col _justify-between), while (likely) not interfering with any of your current styles.

To set a prefix, simply give the prefix key a value in the configuration file:

// tailwind.config.js
module.exports = {
    prefix: '_',
    // ...
}

That's it. Now you can use Tailwind utility classes in combination with your existing styles without breaking anything.

<div class="form-group">
  <label>
    Email address
    <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email">
  </label>
  <small id="emailHelp" class="form-text _text-gray-100 _text_sm">We'll never share your email with anyone else.</small>
</div>