Skip to main content

Migrate from Tailwind CSS to boodoo

Tired of huge PostCSS compiler build steps, 40-character class chains in your HTML, or complex Tailwind purging bugs? Learn how to migrate to boodoo for clean semantic markup while keeping the power of functional utilities.

Want to compare philosophy & bundle sizes first?

Read our direct head-to-head comparison between boodoo and Tailwind CSS.

View boodoo vs Tailwind →

Why Migrate from Tailwind to boodoo?

  • No Build Tool Lock-In: Works instantly with vanilla HTML, PHP, Rails, or Next.js without PostCSS, npm watcher pipelines, or complex configuration files.
  • Clean Readable Markup: Replace 15 repetitive atomic classes on cards and buttons with semantic primitives like .card, .btn, and .badge.
  • Zero-Config JS Included: Built-in modals, tooltips, collapse, command palette, and drawer menus without needing Headless UI or external React dependencies.

Side-by-Side Markup Comparison

1. Card Component

<!-- Before: Tailwind CSS (Long class chain) -->
<div class="bg-white rounded-xl shadow-md p-6 max-w-sm border border-slate-200">
  <h3 class="text-xl font-bold text-slate-900 mb-2">Account Details</h3>
  <p class="text-slate-500 text-sm">Manage your team settings and preferences.</p>
</div>

<!-- After: boodoo (Clean semantic hierarchy) -->
<div class="card p-4 shadow-sm" style="max-width: 380px;">
  <h3 class="fw-bold mb-2">Account Details</h3>
  <p class="text-muted small mb-0">Manage your team settings and preferences.</p>
</div>

2. Buttons & Interactive Controls

<!-- Before: Tailwind CSS -->
<button class="bg-violet-600 hover:bg-violet-700 text-white font-medium py-2 px-4 rounded-full transition-colors">
  Submit
</button>

<!-- After: boodoo -->
<button class="btn btn-primary rounded-pill">
  Submit
</button>

Tailwind to boodoo Utility Mapping

Tailwind Utility boodoo Equivalent
flex, flex-col, items-center, justify-between .d-flex, .flex-column, .align-items-center, .justify-content-between
gap-2, gap-4, gap-6 .gap-2, .gap-3, .gap-4
p-4, m-2, px-3, my-4 .p-3, .m-2, .px-3, .my-4
text-sm, text-lg, font-bold .small, .fs-5, .fw-bold
rounded-full, rounded-lg .rounded-pill, .rounded-3
shadow-sm, shadow-md, shadow-lg .shadow-sm, .elevation-2, .shadow-lg

Automated CLI Codemod

Transform repetitive Tailwind class chains into clean Boodoo utilities and component classes using the built-in CLI:

# Codemod files in ./src or an HTML template
npx boodoo migrate --from=tailwind ./src
npx boodoo migrate --from=tailwind index.html

Tested Compatibility & Known Limitations

Here is what the Tailwind codemod supports and the boundaries of automatic translation:

Utility / Pattern Status Behavior & Guidance
Flexbox & Alignment Supported flex flex-col, items-center, justify-between map cleanly to .flex-column, .align-items-center, .justify-content-between.
Spacing & Padding Supported Standard spacing scales (p-1 to p-5, m-1 to m-5, gap-1 to gap-5) map to Boodoo's proportional spacing tokens.
Grid Containers Supported grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 maps to row row-cols-1 row-cols-md-2 row-cols-lg-3.
Arbitrary Values (`[#123456]`, `top-[17px]`) Limitation Ad-hoc JIT bracket syntax (e.g., w-[347px]) cannot be guessed by static regex. Use scoped CSS custom properties or token variables (--boodoo-spacer-*).
Dynamic State Modifiers (`group-hover:*`, `peer-*`) Limitation Tailwind compound peer/group states require custom CSS rules or CSS :has() parent selectors supported natively in modern browsers.