Class Prefix for Legacy Projects in Tailwind
Add a class prefix to Tailwind CSS utilities to avoid naming conflicts when integrating with existing CSS frameworks like Bootstrap or custom stylesheets.
General
Detailed Explanation
Class Prefix Configuration
When integrating Tailwind into an existing project that already has CSS classes, naming conflicts can occur. The prefix option prevents this.
Setting a Prefix
// tailwind.config.js
module.exports = {
prefix: "tw-",
// ...
};
Effect on Class Names
| Without Prefix | With tw- Prefix |
|---|---|
bg-blue-500 |
tw-bg-blue-500 |
text-center |
tw-text-center |
flex |
tw-flex |
p-4 |
tw-p-4 |
hover:bg-blue-600 |
hover:tw-bg-blue-600 |
Negative Values
Negative prefixes come before the prefix:
<div class="-tw-mt-4">Negative margin</div>
Common Use Cases
- Bootstrap migration: Adding Tailwind alongside Bootstrap without conflicts
- WordPress themes: Avoiding conflicts with WordPress admin styles
- Micro-frontends: Isolating Tailwind styles in a module
- Widget embedding: Building embeddable widgets that won't affect host page styles
Gotchas
@applymust use prefixed class names:@apply tw-flex tw-items-center;- Plugins also respect the prefix automatically
- The prefix does not affect custom CSS you write outside of Tailwind utilities
- Longer class names increase HTML size slightly
When NOT to Use a Prefix
If you are starting a new project from scratch, a prefix adds unnecessary verbosity. Only use it when there is a real conflict to resolve.
Use Case
Use a class prefix when integrating Tailwind CSS into a project that already uses Bootstrap, Foundation, or any other CSS framework with potentially conflicting class names.