**Support / Discussion:** [Gitter](https://gitter.im/postcss/postcss)
**Twitter account:** [@postcss](https://twitter.com/postcss)
**VK.com page:** [postcss](https://vk.com/postcss)
at .

[Abstract Syntax Tree]: https://en.wikipedia.org/wiki/Abstract_syntax_tree

[Evil Martians]:        https://evilmartians.com/?utm_source=postcss

[Autoprefixer]:         https://github.com/postcss/autoprefixer

[plugins]:              https://github.com/postcss/postcss#plugins

  <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"

       alt="Sponsored by Evil Martians" width="236" height="54">

Sponsorship

PostCSS needs your support. We are accepting donations

at Open Collective.

  <img src="https://refactoringui.nyc3.cdn.digitaloceanspaces.com/tailwind-logo.svg"

       alt="Sponsored by Tailwind CSS" width="213" height="50">

      

  <img src="https://mllj2j8xvfl0.i.optimole.com/d0cOXWA.3970~373ad/w:auto/h:auto/q:90/https://s30246.pcdn.co/wp-content/uploads/2019/03/logo.png"

       alt="Sponsored by ThemeIsle" width="171" height="56">

Plugins

Currently, PostCSS has more than 200 plugins. You can find all of the plugins

in the [plugins list] or in the [searchable catalog]. Below is a list

of our favorite plugins — the best demonstrations of what can be built

on top of PostCSS.

If you have any new ideas, [PostCSS plugin development] is really easy.

[searchable catalog]: https://www.postcss.parts/

[plugins list]:       https://github.com/postcss/postcss/blob/main/docs/plugins.md

Solve Global CSS Problem

[postcss-use] allows you to explicitly set PostCSS plugins within CSS

  and execute them only for the current file.

[postcss-modules] and [react-css-modules] automatically isolate

  selectors within components.

[postcss-autoreset] is an alternative to using a global reset

  that is better for isolatable components.

[postcss-initial] adds all: initial support, which resets

  all inherited styles.

[cq-prolyfill] adds container query support, allowing styles that respond

  to the width of the parent.

Use Future CSS, Today

[autoprefixer] adds vendor prefixes, using data from Can I Use.

[postcss-preset-env] allows you to use future CSS features today.

Better CSS Readability

[postcss-nested] unwraps nested rules the way Sass does.

[postcss-sorting] sorts the content of rules and at-rules.

[postcss-utilities] includes the most commonly used shortcuts and helpers.

[short] adds and extends numerous shorthand properties.

Images and Fonts

[postcss-url] postcss plugin to rebase url(), inline or copy asset.

[postcss-sprites] generates image sprites.

[font-magician] generates all the @font-face rules needed in CSS.

[postcss-inline-svg] allows you to inline SVG and customize its styles.

[postcss-write-svg] allows you to write simple SVG directly in your CSS.

[webp-in-css] to use WebP image format in CSS background.

[avif-in-css] to use AVIF image format in CSS background.

Linters

[stylelint] is a modular stylesheet linter.

[stylefmt] is a tool that automatically formats CSS

  according stylelint rules.

[doiuse] lints CSS for browser support, using data from Can I Use.

[colorguard] helps you maintain a consistent color palette.

Other

[cssnano] is a modular CSS minifier.

[lost] is a feature-rich calc() grid system.

[rtlcss] mirrors styles for right-to-left locales.

[PostCSS plugin development]:   https://github.com/postcss/postcss/blob/main/docs/writing-a-plugin.md

[postcss-inline-svg]:         https://github.com/TrySound/postcss-inline-svg

[postcss-preset-env]:         https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env

[react-css-modules]:          https://github.com/gajus/react-css-modules

[postcss-autoreset]:          https://github.com/maximkoretskiy/postcss-autoreset

[postcss-write-svg]:          https://github.com/jonathantneal/postcss-write-svg

[postcss-utilities]:          https://github.com/ismamz/postcss-utilities

[postcss-initial]:            https://github.com/maximkoretskiy/postcss-initial

[postcss-sprites]:            https://github.com/2createStudio/postcss-sprites

[postcss-modules]:            https://github.com/outpunk/postcss-modules

[postcss-sorting]:            https://github.com/hudochenkov/postcss-sorting

[font-magician]:              https://github.com/jonathantneal/postcss-font-magician

[autoprefixer]:               https://github.com/postcss/autoprefixer

[cq-prolyfill]:               https://github.com/ausi/cq-prolyfill

[postcss-url]:                https://github.com/postcss/postcss-url

[postcss-use]:                https://github.com/postcss/postcss-use

[css-modules]:                https://github.com/css-modules/css-modules

[webp-in-css]:                https://github.com/ai/webp-in-css

[avif-in-css]:                https://github.com/nucliweb/avif-in-css

[colorguard]:                 https://github.com/SlexAxton/css-colorguard

[stylelint]:                  https://github.com/stylelint/stylelint

[stylefmt]:                   https://github.com/morishitter/stylefmt

[cssnano]:                    https://cssnano.co/

[postcss-nested]:             https://github.com/postcss/postcss-nested

[doiuse]:                     https://github.com/anandthakker/doiuse

[rtlcss]:                     https://github.com/MohammadYounes/rtlcss

[short]:                      https://github.com/jonathantneal/postcss-short

[lost]:                       https://github.com/peterramsing/lost

Syntaxes

PostCSS can transform styles in any syntax, not just CSS.

If there is not yet support for your favorite syntax,

you can write a parser and/or stringifier to extend PostCSS.

[sugarss] is a indent-based syntax like Sass or Stylus.

[postcss-syntax] switch syntax automatically by file extensions.

* [`postcss-html`] parsing styles in `