Moving to Tailwind CSS from Bootstrap? Use a Prefix

I've heard the line...

I'm moving to Tailwind CSS but it's been difficult as it breaks Bootstrap

...at least three times. It's not a lot, but when the solution is a single line of code, it seems significant.

So, what's the magical line? You ask.

prefix: 'tw-'

That's it. Now classes like flex will be tw-flex. If you don't like tw-, don't use it. You can set the prefix to anything you want, even help- 🤷‍♂️

However, sometimes you might still encounter issues. This is likely due to conflicts between Tailwind CSS and Bootstrap normalize CSS. You can resolve this by disabling one.

I usually disable the Tailwind CSS normalize because I want to keep the styles close to the Bootstrap implementation while transitioning.

I know that's a little backwards, but you have to keep the clients happy!

To disable the Tailwind CSS normalize, you can easily comment it out.

/* @tailwind base; */
@tailwind components;
@tailwind utilities;

You can read more about prefix on the Tailwind CSS website.