Tailwind to CSS Converter
Paste a Tailwind class list or a full HTML snippet. You get plain CSS declarations for each recognized utility using Tailwind v3 default values, with responsive and state variants annotated, plus a list of anything unrecognized so nothing is skipped silently.
Unrecognized classes (no rule generated):
Generated CSS
/* Paste classes above to generate CSS */How to use
- Paste a space-separated Tailwind class list, or paste HTML and the tool reads every
classattribute. - Each recognized utility is converted to plain CSS with real Tailwind v3 default values, live as you type.
- Copy the generated CSS block and paste it into your stylesheet.
Note: This covers the most common utilities, spacing scale, fractions, typography, borders, shadows, colors, flex and grid. Variant prefixes such as sm, md, lg, xl, 2xl, hover, focus, active, disabled, first, last, odd, even and dark are annotated with their media query or state. Arbitrary values like w-[200px] or bg-[#3b82f6] are converted when the property is known.
Tips
- Order of classes in the input does not matter; each rule is printed once in the order first seen.
- Classes the converter does not know are listed in the warning box above the output so you can add them by hand.
- For full production builds, the official Tailwind compiler handles every edge case; this tool is for quick porting of snippets.