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, which is not a lot, but when the solution is a single line of code, it feels like a lot.

But what is the mighty line? You ask.

prefix: 'tw-'

That's it.

Now classes like flex will be tw-flex and if you don't like tw- then don't use it. You can set the prefix to anything you want, even ow2-is-a-cash-grab- 🤷‍♂️

Sometimes you will still face issues, this is most likely due to the Tailwind CSS and Bootstrap normalize CSS conflicting. You can solve this by disabling one.

I usually disable the Tailwind CSS normalize as I want to keep the styles as close to the Bootstrap implementation while moving over.

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

It's as easy as a comment to disable the Tailwind CSS normalize.

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

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