Unminify CSS online
Drop in a compressed stylesheet and read it properly again. Selectors on their own lines, one declaration per line, blocks and media queries indented the way you would write them by hand.
Why production CSS is one long line
Stylesheets are minified for the same reason scripts are: CSS blocks rendering, so every byte saved shows up directly in how fast a page paints. cssnano, Lightning CSS and the optimisers built into Sass and PostCSS strip whitespace and comments, shorten colour values, merge duplicate rules and drop the final semicolon of each block. Utility frameworks make the result even denser, because a compiled Tailwind stylesheet can hold thousands of tiny rules with almost nothing between them.
Reading the cascade again
The main reason to beautify a stylesheet is to understand why a rule is or is not applying. Once each selector sits on its own line with its declarations indented beneath it, you can follow the cascade properly: find every rule targeting an element, compare their specificity, see which one comes last, and spot the stray important that has been overriding your work. Media queries and their contents become visible as blocks, which makes responsive behaviour far easier to trace than in a compressed file.
Modern CSS is supported
The formatter understands current CSS rather than a legacy subset. Custom properties, calc and clamp expressions, grid and flexbox shorthands, container queries, nested rules, layers, supports blocks and keyframes all format correctly. Long selector lists are broken across lines so you can actually read them, and comments that survived the build are preserved. If the file mixes plain CSS with vendor prefixed properties, both are kept exactly as they were, only laid out clearly.
A practical tip for compiled frameworks
When you beautify a compiled Tailwind or Bootstrap stylesheet, the file gets long very quickly, tens of thousands of lines is normal. Turn on line numbers, then use your browser's find function on the class name or property you care about rather than scrolling. If your goal is to shrink the file rather than read it, remember that the interesting work happens in the build configuration, since the unused rules were generated before minification ever ran.
Frequently asked questions
Can I unminify a compiled Tailwind stylesheet?
Yes, and it is one of the most common uses of this page. Expect a very long result because the framework generates one rule per utility class, so turning on line numbers and using your browser's search is the practical way to navigate it.
Are comments restored?
Only the ones that survived. Most minifiers delete every comment except those marked as legal notices, and once deleted they cannot be recovered. The formatter keeps whatever is still in the file and lays it out properly.
Does it work on SCSS or Less?
This page targets plain CSS, which is what browsers actually download. Preprocessor sources with variables, mixins and nesting syntax specific to SCSS or Less are not the intended input, though standard nested CSS is handled.