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.

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="h5 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