Tailwind to CSS Converter
Paste a class attribute. Responsive prefixes become media queries, state prefixes become pseudo-classes, and bracketed arbitrary values are decoded as written.
Tailwind to CSS Converter — Free Online Tool
Expands Tailwind utility classes back into the CSS declarations they compile to, resolving the default spacing, color, font-size, border-radius and shadow scales, decoding arbitrary values such as w-[13px], and grouping responsive and state variants (md:, hover:, dark:) into the media queries and pseudo-class selectors they generate.
How to use the Tailwind to CSS Converter
- Open the tool above — it runs entirely in your browser, so your input never leaves this page.
- Paste or type your input into the field, then press the relevant button (e.g. Encode / Decode, Generate, or Convert).
- Copy the result from the output area with the copy button orCtrl/Cmd + C.
- No signup, no upload, and no tracking — repeat as often as you need.
Frequently asked questions
How are md:, hover: and dark: handled?
Responsive prefixes become a min-width media query, state prefixes become a pseudo-class on the selector, and dark: becomes a prefers-color-scheme media query. They compose, so md:hover:bg-blue-500 produces a hover rule inside the md media query.
What does an underscore mean inside an arbitrary value?
It stands for a space. Tailwind class names cannot contain spaces, so shadow-[0_1px_3px_rgba(0,0,0,0.1)] is how a multi-part value is written — and it is decoded back to spaces here.
Why is a class listed as not recognized?
It is either from a plugin, from a customized theme value in your tailwind.config, or a utility outside the default scale this tool ships. The output reflects Tailwind's defaults, not your project's configuration.
Free & private — why use this Tailwind to CSS Converter
The Tailwind to CSS Converter runs 100% client-side in your browser. Your data is never uploaded to a server, no account is required, and the tool is completely free. It works offline once the page has loaded and is part of a growing collection of privacy-first developer utilities.