How to Integrate Tailwind CSS into an Existing Project
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.