Is the CSS processed locally?

Yes. Formatting runs entirely in your browser using a CSS parser bundled with the page. No stylesheet is ever sent to a server.

Does it support modern selectors like :has() and :is()?

Yes. The parser understands current CSS3 and CSS4 selector syntax, including :has(), :is(), :where(), and nesting.

Block comments (/* ... */) are preserved and re-indented next to the rule they document. Comments inside selectors are also retained.

What is the difference between formatting and minifying CSS?

Formatting expands the stylesheet for human reading by adding line breaks and indentation. Minifying does the opposite by stripping whitespace and comments to reduce file size.

prettier · postcss · live · client-side

Format CSS with Prettier

Prettier's postcss printer reformats declarations, normalises selectors, and aligns the messy output of preprocessors. Runs locally.

CSS Formatter

Input

110 B

1 lines

Output

0 B

1 lines

Status

parser…

Ratio

0.00×

out/in

input · css

output · formatted css

Loading parser…

Quick Start

How to format CSS

Prettier's postcss parser handles CSS, plus nested SCSS-ish syntax that's stayed inside a .css file by accident.

01
Paste the rules
Minified CSS, copy-paste from devtools, or a long single-line bundle.
Parsing runs through Prettier’s standalone bundle (or the language-specific equivalent) loaded lazily — no parser ships until the tool is opened.
cssPrettierASTstandalonelazy
input · sourceraw · AST
```
.a{color:red}
```
loaded · parsedAST · ready
02
Adjust spacing
Tab width controls indentation; print width forces long shorthand to wrap.
Indent width, tab style, and print-width re-format through a memoised pass — switching 2 → 4 spaces never re-parses, only re-prints.
optionsindentprint-widthmemoisedlive
opts · optionstab/width · live
```
tab=2
width=80
```
options applied · livelive
03
Watch it reflow
Declarations land one-per-line, selectors split at commas, calc() expressions get breathing room.
The formatter is deterministic and idempotent: running it twice produces byte-identical output, which keeps diffs and git noise to a minimum.
liveidempotentdeterministicdiff-cleanstable
out · formattedpretty · ready
```
.a {
  color: red;
}
```
formatted · liveidempotent
04
Copy or download
Output goes straight to clipboard or .css file — input stays in the browser.
Download writes a Blob with the language-appropriate extension; copy uses navigator.clipboard.writeText so the output preserves all whitespace exactly.
exportclipboardbloblanguage MIMEclient-side
ok · copiedready · done
```
✓ Copied
```
shipped · ready to shipsuccess

Pro tips

Formatting tips that keep diffs sane

Pick one config and pin it

Inconsistent formatting causes diff churn. Commit .prettierrc / .editorconfig and enforce in CI.

Format on save

Editor integration is faster feedback than a pre-commit hook. Use both for belt-and-braces.

Idempotency matters

Running the formatter twice should produce identical output. Test this on a representative file.

Match the language community

Default to community conventions: 2 spaces for JS/CSS, 4 for Python, tabs for Go. Fights over indent are a productivity tax.

Print-width drives wrapping

80, 100, and 120 are the common targets. Wider lines parse fast but review slower side-by-side.

Don’t mix formatters and linters

Prettier handles whitespace; ESLint handles correctness. Disable overlapping rules to avoid fight-club configs.

Use Cases

When to format CSS

Bundle inspection, design audits, code reviews.

Bundle inspection

Pretty-print a production CSS bundle to find dead rules. Idempotent: running the formatter twice produces byte-identical output, which is the foundation of a clean CI gate. Pair with a pre-commit hook so PRs arrive already formatted, focusing review on logic.

idempotent

Design audits

Make a designer's hand-written CSS readable for review. Pairs with EditorConfig + .prettierrc for end-to-end consistency. Whitespace-only changes vanish so reviewers see real diffs, and git blame stays honest about who wrote what.

CI-ready

Code reviews

Strip whitespace churn so a diff only shows real changes. Output respects your indent width, tab style, and print-width — settings carry over for repeat runs. Switching 2-space to 4-space costs nothing in CPU but standardises an entire codebase.

diff-clean

Style-guide gen

Standardise CSS examples before embedding in docs. Format-on-save is the fastest feedback loop; CI is the safety net. Together they make inconsistent indentation a thing of the past and free up review cycles for genuine concerns.

PR-friendly

Legacy refactor

Format an old global stylesheet before splitting it up. Whitespace-only changes don't trigger downstream content-hash invalidations, so CDN cache keys and CI cache layers stay warm. Real changes get all the rebuild budget.

review-ready

Email CSS

Reformat inlined email CSS to find rules that won't render. Pairs with linters (ESLint, Stylelint, pylint) that catch what formatting alone can't — bugs, unused imports, dead code. Each tool stays in its lane, and the codebase stays clean.

deterministic

FAQ

Frequently asked questions

Does it support SCSS/Less syntax?

Use the SCSS and Less formatters — they share the postcss plugin but use different parsers for variables and nesting.

Will it reorder properties?

No. Use the Sort CSS Properties tool if you want alphabetical order.

What about @import order?

Preserved. Prettier formats whitespace; it doesn't restructure at-rules.

Does it remove vendor prefixes?

No. Prefixes are kept as authored — use autoprefixer / postcss-preset-env for that.

Is anything sent to a server?

No — Prettier runs locally in your browser tab.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!