Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
May 26, 2017 16:16
June 10, 2019 12:07
April 29, 2021 09:46
September 15, 2021 07:35
April 29, 2021 09:46
April 29, 2021 09:46
September 15, 2021 07:56
June 16, 2018 02:24
June 4, 2019 09:00
June 7, 2018 00:43
September 15, 2021 07:34
September 15, 2021 07:56

PostCSS Normalize PostCSS

npm version build status support chat

PostCSS Normalize lets you use the parts of normalize.css or sanitize.css that you need from your browserslist.

@import "normalize.css";
@import "sanitize.css";

PostCSS Normalize uses a non-opinionated version of normalize.css, but an opinionated version may also be used.

@import "normalize.css/opinionated.css";


Here is a sample of what normalize.css looks like when the browserslist is ie >= 9:

 * Add the correct display in IE 9-.

video {
  display: inline-block;

 * Remove the border on images inside links in IE 10-.

img {
  border-style: none;

And here is the same sample when the browserslist is ie >= 10:

 * Remove the border on images inside links in IE 10-.

img {
  border-style: none;


Add PostCSS Normalize to your project:

npm install postcss-normalize --save-dev

Add a browserslist entry in package.json:

  "browserslist": "last 2 versions"

Use PostCSS Normalize to process your CSS:

const postcssNormalize = require('postcss-normalize')

postcssNormalize.process(YOUR_CSS /*, processOptions, pluginOptions */)

Or use it as a PostCSS plugin:

const postcss = require('postcss')
const postcssNormalize = require('postcss-normalize')

  postcssNormalize(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */)

PostCSS Normalize runs in all Node environments, with special instructions for:

Node PostCSS CLI Webpack Create React App Gulp Grunt

PostCSS Import Usage

PostCSS Normalize includes a postcssImport function to configure PostCSS Import and allow you to continue using the @import syntax.

const postcss = require('postcss')
const postcssImport = require('postcss-import')
const postcssNormalize = require('postcss-normalize')

      /* pluginOptions (for PostCSS Normalize) */
      /* pluginOptions (for PostCSS Import) */
]) // now you can use @import "normalize.css", etc. again

Alternatively, use @import-normalize or @import-sanitize to avoid conflicts with @import transforms.

@import-normalize "opinionated.css";



The allowDuplicates option determines whether multiple, duplicate insertions of CSS libraries are allowed. By default, duplicate libraries are omitted.

postcssNormalize({ allowDuplicates: true })


The forceImport option defines CSS libraries that will be inserted at the beginning of the CSS file. Unless overriden by allowDuplicates, duplicate CSS libraries would still be omitted.

postcssNormalize({ forceImport: true })

Specific CSS libraries may be defined.

  forceImport: 'sanitize.css'


The browsers option defines an override of the project’s browserslist for PostCSS Normalize. This option should be avoided in leui of a browserslist file.

postcssNormalize({ browsers: 'last 2 versions' })

CSS Libraries

PostCSS Normalize can include normalize.css or sanitize.css and configure either with the following combinations:

@import "normalize"; /* also, @import "normalize.css" */
@import "normalize/opinionated"; /* also, @import "normalize.css/opinionated.css", @import "normalize.css/*" */
@import "sanitize"; /* also, @import "sanitize.css" */
@import "sanitize/assets"; /* also, @import "sanitize.css/assets.css" */
@import "sanitize/forms"; /* also, @import "sanitize.css/forms.css" */
@import "sanitize/reduce-motion"; /* also, @import "sanitize.css/reduce-motion.css" */
@import "sanitize/system-ui"; /* also, @import "sanitize.css/system-ui.css" */
@import "sanitize/typography"; /* also, @import "sanitize.css/typography.css" */
@import "sanitize/ui-monospace"; /* also, @import "sanitize.css/ui-monospace.css" */
@import "sanitize/*"; /* also, @import "sanitize.css/*" (sanitize + all additions) */