Tailwind Utilities → CSS
Private by design — runs entirely in your browser
Paste a list of Tailwind utility classes plus a selector and Toova builds the matching CSS rule. Arbitrary classes like p-[13px] or [grid-template-columns:1fr_2fr] unwrap to raw declarations so the output is something you can drop straight into a stylesheet.
When the reverse direction helps
Sometimes you start with a Tailwind prototype but need to ship CSS — a marketing email, a third-party widget, a hand-off to a CMS that does not load Tailwind. The converter folds the utility list into one rule keyed by the selector you choose, so you copy and paste without renaming or shaving the playground markup.
How arbitrary values come through
Tailwind arbitrary classes carry their value inline: p-[13px] means padding: 13px and [grid-template-columns:1fr_2fr] means grid-template-columns: 1fr 2fr. The converter unwraps both shapes literally, so any custom value you encoded in JIT survives the trip without an extra mapping table.
Limits and round-trips
Responsive variants (md:flex), state variants (hover:bg-black) and dark-mode (dark:text-white) need media-query or pseudo-class wrappers, so the converter does not yet emit them — strip those before pasting. Theme tokens (text-brand) fall back to the default Tailwind colour scale; if you have customised the theme, expect arbitrary fallbacks. Plain utilities round-trip cleanly with the CSS to Tailwind tool.
Frequently Asked Questions
- What gets converted?
- Common Tailwind utilities for spacing, color, typography, flex layout and position, plus any arbitrary [value] or [prop:value] form. Variants are not yet supported.
- Why ask for a selector?
- The output is a single CSS rule. Picking the selector means you paste the result directly into a stylesheet without renaming or rewrapping.
- Are responsive and hover variants supported?
- Not yet — they require media-query or pseudo-class wrappers. Strip md:, hover: and dark: prefixes before pasting; base utilities round-trip cleanly.
- Does it understand my Tailwind theme?
- No. The tool uses the default scale. Customised spacing or colors fall back to arbitrary declarations in the output, so you can still ship working CSS.
- Can I send the CSS through the inverse tool?
- Yes — for plain utilities the round-trip is exact. Arbitrary values survive; unsupported declarations stay as arbitrary classes.
- Is my input uploaded?
- No. The whole conversion runs in this tab; Toova does not see your class lists, your selectors or your output.