Convert Tailwind CSS utility classes to standard CSS properties with proper grouping and formatting.
Paste the class attribute of a Tailwind-styled element - or a bare class string - and this tool returns the equivalent CSS declarations, grouped so related properties sit together and formatted one declaration per line. Each utility token is resolved against Tailwind's default scales and value tables. Two things trip people up. The output is declarations, not a complete rule: it carries no selector, and responsive or state variants like md: or hover: keep none of their trigger context, so that behavior has to be rebuilt by hand. And the step number in a spacing class is not pixels: p-4 means 1rem, not 4px.
A concrete input and expected output from the current implementation.
Input
flex items-center justify-between p-4 rounded-lg
Expected output
display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-radius: 0.5rem;
Each token resolves to its Tailwind default: flex to display: flex, items-center to align-items: center, justify-between to justify-content: space-between, p-4 to 1rem on the 0.25rem spacing scale, and rounded-lg to the 0.5rem corner radius. The declarations are then emitted grouped - layout and alignment first, then spacing, then shape.
The input string is split into tokens on whitespace. Each token is matched against the utility grammar: a base such as p-, m-, w-, bg-, text-, rounded-, flex, or grid, optionally followed by a scale step like 4, 500, or lg. Recognized patterns resolve to one or more declarations, with step values from built-in tables: spacing is 0.25rem times the step, and named steps pick from the size table. Tokens it does not recognize produce no declarations.
Declarations from every recognized token are collected, then emitted in a fixed family order rather than input order - layout and display first, then spacing, typography, colors, and effects - so the output reads like a hand-written rule. Formatting is uniform: one declaration per line, lowercase property names, a semicolon after every declaration, so the block can be copied straight into a stylesheet.
A variant names a trigger - a breakpoint or a state - and a flat list of declarations cannot carry it. Whatever the converter does with the prefix, the usable result is the underlying declaration, and you re-attach the trigger yourself: a :hover rule for hover:, a media query for md:. That reconstruction is the part no class-to-property conversion can do for you.
An arbitrary value carries its literal CSS value inside the brackets, so w-[17px] can resolve directly to width: 17px if the converter supports the syntax. Values you defined in your own tailwind.config.js - custom colors, fonts, or renamed steps - are invisible to a converter built around default tables, so expand those classes by hand before converting.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.