See exactly what CSS a Tailwind class list generates — core utilities translated to their v3.4 default declarations, variants annotated with their media query or state, unknowns listed honestly.
Show calculation steps
Processed privately in your browser — nothing you paste is uploaded, logged or stored.
X-ray for utility classes
Paste classes or markup and see the CSS they generate — real declarations with Tailwind’s default values, not paraphrases. Shadows show their full multi-part values, text sizes bring their paired line-height, truncate expands to its three declarations. Variant classes (hover:, md:) are annotated with the state or media query they apply under, and anything outside the supported core is listed rather than skipped silently.
Worked example
flex items-center p-6 bg-white rounded-lg shadow-md
.your-element {
display: flex;
align-items: center;
padding: 1.5rem;
background-color: #ffffff;
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}When to use it
- Porting a Tailwind snippet into a non-Tailwind codebase (emails, legacy CSS, WordPress themes).
- Debugging: seeing shadow-md’s actual value explains rendering questions faster than docs.
- Learning what utilities really do — the reverse direction of the CSS to Tailwind Converter.
Limitations
- Values are v3.4 defaults (kept by v4 in these namespaces); a re-themed project generates different values than shown.
- Variants are annotated, not expanded into selectors — placing them in your CSS structure is deliberate manual work.
How to use the Tailwind to CSS Converter
- Paste Tailwind classes or markup — class attributes are extracted automatically.
- Click "Convert to CSS".
- Read the generated declarations; variant classes are annotated with their media query or state.
Frequently asked questions
Why would I convert Tailwind back to CSS?
To learn what a class actually does, to port a snippet to a non-Tailwind project, or to debug why a utility is not behaving — seeing box-shadow's real value beats guessing.
Which values does the output use?
Tailwind v3.4 defaults — which v4 keeps for these namespaces unless re-themed. If your project overrides the theme, your generated CSS will differ accordingly.
How are hover: and md: classes handled?
Annotated rather than expanded: each variant class is listed with the media query or state it applies under, so you can place the declarations into your own selectors correctly.
