Let Claude Convert Vanilla CSS to Tailwind Utility Classes
Migrating from vanilla CSS or Bootstrap to Tailwind is tedious, error-prone work — paste your stylesheet and let Claude do the conversion rather than mapping classes by hand.
Ask Claude: "Convert this CSS to equivalent Tailwind utility classes and update
the HTML/JSX to use them. Flag any custom values that need to go in tailwind.config.js."
Claude maps your CSS properties to the correct Tailwind utilities, handles responsive breakpoints, and rewrites hover/focus states using Tailwind's modifier syntax:
/* Before */
.card {
display: flex;
flex-direction: column;
padding: 1.5rem;
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
background: white;
}
.card:hover { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
{/* After — Claude's converted output */}
<div className="flex flex-col p-6 rounded-lg shadow-sm bg-white hover:shadow-md transition-shadow">
For custom design tokens (non-standard colours, spacing, or font sizes), Claude generates the matching tailwind.config.js theme.extend block so nothing breaks.
You can also run it in reverse — paste a long string of Tailwind classes to get readable CSS output for debugging or documentation.
Tailwind migrations don't have to be a week-long slog — Claude can convert an entire stylesheet in a single session.
Log in to leave a comment.
The /security-review command scans your uncommitted changes for injection vectors, auth gaps, hardcoded secrets, and other common vulnerabilities.
The SessionStart hook fires when any session begins or resumes, making it ideal for loading environment variables and running one-time setup scripts.
Ask Claude to write property-based tests for your functions using fast-check — it identifies the mathematical invariants in your code and generates tests that cover inputs you'd never enumerate by hand.