CSS to Tailwind Converter

How to use

1. 1Paste the CSS into the input. Use a full rule (.card { padding: 16px; color: #3b82f6; }), a bare list of declarations, or just one property: value pair.
2. 2Click one of the Examples to load a card, button, hero, typography, or arbitrary-value sample if you want to see how the converter behaves.
3. 3Read the Combined Tailwind classes card for the merged class string. Copy it with the Copy classes button.
4. 4Edit the HTML tag field to change the wrapping tag in the HTML snippet output (div, button, section, etc.).
5. 5Use the Per-rule classes card to copy a separate class string for each CSS selector you provided.
6. 6Read the Per-declaration breakdown to see which Tailwind utility each CSS property compiled to. Green chips matched the default scale; amber chips fell back to an arbitrary value.
7. 7Check the Notes card for any CSS properties or values that the default mapping does not cover so you can decide whether to keep them as plain CSS.

About this tool

CSS to Tailwind Converter turns a block of CSS declarations into the equivalent Tailwind utility classes. Paste a full rule with a selector and braces, a bare declaration list, or even a single property line, and the tool returns three views: a single merged Tailwind class string ready to drop into class="...", an HTML snippet that wraps the merged classes around the tag you pick, and a per-declaration breakdown that shows which Tailwind utility each CSS property mapped to. It covers the Tailwind v3.4 / v4 default theme: the spacing scale on the 0.25rem step (used for margin, padding, gap, inset, top, right, bottom, left), width and height with the standard keywords (auto, full, screen, min, max, fit) and the percentage to fraction conversion (50% to 1/2, 33% to 1/3, 75% to 3/4), typography (font-size with bundled line-height across the xs to 9xl scale, font-weight by name or numeric value, line-height named tokens, letter-spacing, text-align, text-transform, text-decoration), the complete default color palette (22 hues across 11 shades for text, background, and border, with opacity modifiers like bg-blue-500/50 emitted when the input includes an alpha channel), border width and style and radius (per-side and unified, with the rounded scale matched by name and by rem value), shadow scale matched against the canonical Tailwind v3 / v4 shadow strings, display, position with full inset support, z-index, flexbox (direction, wrap, align-items, justify-content, align-self, gap with row and column variants), grid-template-columns and rows in the repeat(N, minmax(0, 1fr)) idiom that Tailwind ships as grid-cols-N, object-fit and object-position, aspect-ratio with the square and video shortcuts, cursor, user-select, pointer-events, opacity, overflow with axis variants, and a handful of typography niceties like white-space, word-break, and overflow-wrap. Values that are not in the default scale fall back to Tailwind arbitrary values (p-[13px], text-[#bada55], w-[42rem], shadow-[0_4px_8px_rgba(0,0,0,0.2)]), which are highlighted as amber chips in the breakdown so you can tell at a glance what is on-scale and what is custom. Negative lengths become negative utilities (-mt-4 for margin-top: -1rem). Properties the default mapping does not cover (animation, transitions, custom CSS functions) are reported in the Notes card rather than silently dropped. Everything runs in your browser. No code is uploaded.

Free to use. Works in your browser. No signup, no login.