Moving to Tailwind CSS from another framework? Use a Prefix!
- Reading:
- Published:
- Updated:
I've heard this a few times:
I'm switching to Tailwind CSS, but my old framework keeps breaking things!
Whether you're moving from Bootstrap, Bulma, or any other CSS framework, Tailwind CSS makes it easy to avoid class name conflicts.
The magic line?
@import 'tailwindcss' prefix(tw);
Add this to your CSS entry file and Tailwind will generate classes like tw-flex instead of flex. You can use any prefix you like, such as app or custom:
@import 'tailwindcss' prefix(app);
This prevents conflicts with utility classes from other frameworks, making your migration much smoother.
What about CSS resets?
Most CSS frameworks include their own CSS resets (normalize/base styles). If you notice style conflicts, you can disable Tailwind’s base styles by omitting the base import:
/* @import "tailwindcss/base"; */
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
This keeps your previous framework’s styles intact while you transition.
For more details, check out the Tailwind CSS docs on prefix.