How to Move to Tailwind CSS Without Breaking Existing Styles
Migrating from another CSS framework? Use a Tailwind CSS prefix to avoid class conflicts and ship incrementally.
Moving from Bootstrap, Bulma, or another utility framework?
If both systems are loaded at the same time, class name collisions are common. The cleanest way to avoid that is to add a Tailwind prefix.
Use a Prefix
In Tailwind CSS v4, set a prefix directly in your import:
@import 'tailwindcss' prefix(tw);
Now Tailwind utilities are generated as tw-flex, tw-grid, tw-text-sm, and so on.
You can use any prefix:
@import 'tailwindcss' prefix(app);
This gives you a safe migration path where old and new classes can coexist.
Example
Before prefixing, this might conflict with another framework:
<div class="flex items-center gap-2">...</div>
After prefixing Tailwind:
<div class="tw-flex tw-items-center tw-gap-2">...</div>
You can migrate component-by-component instead of rewriting everything at once.
What About Resets?
Many CSS frameworks ship base styles.
Tailwind v4 includes Preflight by default. If that clashes with your existing framework during migration, import Tailwind layers explicitly and skip preflight.css:
@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
/* @import 'tailwindcss/preflight.css' layer(base); */
@import 'tailwindcss/utilities.css' layer(utilities);
That keeps your current framework’s reset/base behavior while you migrate.
Why This Approach Works
- Prefixing avoids utility name collisions.
- Layered imports let you choose whether Tailwind Preflight runs.
- You can ship incrementally without breaking existing pages.
References: