Configure options below — the preview updates in real time.

Core Plugins

Enable and configure the most commonly used PostCSS plugins.

AutoprefixerAutomatically add vendor prefixes to CSS rules using data from Can I Use.

Override the browserslist query for autoprefixer.

Enable or configure CSS Grid prefixing for IE.

Autoprefixer FlexboxAdd prefixes for flexbox properties. Disable if targeting modern browsers only.
Autoprefixer RemoveRemove outdated vendor prefixes from the output.
cssnanoMinify and optimize CSS for production. A modular CSS minifier.

The optimization preset to use for cssnano.

Tailwind CSSEnable Tailwind CSS utility-first framework as a PostCSS plugin.
postcss-importTransform @import rules by inlining content. Resolves and bundles imported CSS files.

Syntax & Language Plugins

Plugins that add modern CSS syntax, nesting, variables, and other language features.

postcss-nestingNest style rules inside each other following the CSS Nesting specification.
postcss-nestedUnwrap nested rules like how Sass does it. Alternative to postcss-nesting.
postcss-custom-propertiesTransform CSS Custom Properties (CSS Variables) for older browser support.
postcss-preset-envConvert modern CSS into something most browsers can understand, determining polyfills based on target browsers.

CSS feature stage to enable. Stage 0 is experimental, Stage 4 is stable.

Enable or disable specific CSS features by ID (e.g. nesting-rules, custom-properties).

Override the browserslist query for postcss-preset-env.

Preset Env AutoprefixerWhether postcss-preset-env should include autoprefixer.
postcss-mixinsEnable Sass-like mixins in CSS.
postcss-simple-varsEnable Sass-like variables in CSS ($variable syntax).

Utility Plugins

Utility plugins for transforming units, sorting, and other helpers.

postcss-pxtoremConvert pixel units to rem for responsive design.

The root element font size (usually 16).

CSS properties to convert from px to rem.

Additional Plugins

Other PostCSS plugins to load by package name.

Enter additional PostCSS plugin package names to include.

Parser & Syntax

Configure custom parsers and syntax handlers for non-standard CSS formats.

Custom PostCSS syntax module containing both parser and stringifier. For processing SCSS, Less, SugarSS, etc.

A special syntax parser to generate AST from a string. Used independently of syntax for safe parsing.

A special syntax output generator that converts AST back to string.

File Paths

Input and output file paths for PostCSS processing.

The input file path. Used for source map generation and error messages.

The destination file path. Used for source map annotation.

Source Map

Configure source map generation for debugging transformed CSS.

InlineEmbed the source map directly into the output CSS as a Base64-encoded comment.
Sources ContentInclude the original source content inside the generated source map.

Source map content from a previous processing step (e.g. Sass). Set to false to ignore previous maps, or provide a file path string.

Add a sourceMappingURL annotation comment to the output CSS. Set to false to disable, or provide a custom file path string.

Absolute PathsForce absolute file paths in the source map sources array instead of relative paths.

Override the from property specifically for the sources array inside the source map.