Paste a CSS rule or property block and get the equivalent Tailwind utility classes instantly. Covers spacing, typography, colors, flexbox, grid, borders, and more — runs entirely in your browser.
Tailwind CSS is a utility-first framework that replaces handwritten CSS with short, composable class names. Instead of writing a .card { display: flex; padding: 16px; } rule in a stylesheet, you write flex p-4 directly in your HTML. This approach eliminates context-switching between HTML and CSS files, removes dead styles automatically via tree-shaking, and produces smaller production bundles compared to bespoke stylesheets.
Migrating existing CSS to Tailwind is the most common use case for this tool: you paste a block of CSS declarations from a legacy stylesheet, a component library, or a design handoff, and instantly see which Tailwind classes replace each property. Properties that have no direct Tailwind equivalent — such as highly specific values or custom animations — are flagged as unknown so you know exactly where to reach for an arbitrary value (text-[14px]) or keep plain CSS.
margin, padding, gap
font-size, font-weight, line-height
display, flex, grid, position
text-[14px] for non-standard font sizes
bg-[#1a2b3c] for non-palette colors
w-[320px] for exact pixel widths
Tailwind is an excellent fit for component-based UIs built with React, Vue, Svelte, or similar frameworks, where each component owns its markup and styles together. The utility-first approach eliminates the need to invent class names, prevents stylesheet growth, and makes styles predictable and co-located with structure. For design systems with highly consistent spacing and type scales, Tailwind's default theme often maps cleanly to your existing CSS.
That said, Tailwind is not always the right answer. Legacy projects with thousands of existing CSS rules are expensive to migrate. Highly dynamic styles — where class names are computed at runtime — can bypass Tailwind's tree-shaking and require safelisting. And some teams simply prefer the separation of concerns offered by CSS Modules or styled-components. Use this tool as a migration aid or learning resource, and always review generated classes in context before committing them to a codebase.