Customizing PostCSS Config

    Next.js compiles CSS for its using PostCSS.

    Out of the box, with no configuration, Next.js compiles CSS with the following transformations:

    1. Autoprefixer automatically adds vendor prefixes to CSS rules (back to IE11).
    2. are corrected to behave like the spec.
    3. New CSS features are automatically compiled for Internet Explorer 11 compatibility:

    By default, CSS Grid and (CSS variables) are not compiled for IE11 support.

    To compile CSS Grid Layout for IE11, you can place the following comment at the top of your CSS file:

    You can also enable IE11 support for in your entire project by configuring autoprefixer with the configuration shown below (collapsed). See “Customizing Plugins” below for more information.

    Click to view the configuration to enable CSS Grid Layout

    1. {
    2.   "plugins": [
    3.     "postcss-flexbugs-fixes",
    4.     [
    5.       "postcss-preset-env",
    6.       {
    7.         "autoprefixer": {
    8.           "grid": "autoplace"
    9.         },
    10.         "stage": 3,
    11.         "features": {
    12.           "custom-properties": false
    13.         }
    14.       }
    15.     ]
    16.   ]
    17. }

    Next.js allows you to configure the target browsers (for and compiled css features) through Browserslist.

    To customize browserslist, create a browserslist key in your like so:

    You can use the tool to visualize what browsers you are targeting.

    No configuration is needed to support CSS Modules. To enable CSS Modules for a file, rename the file to have the extension .module.css.

    You can learn more about Next.js’ CSS Module support here.

    This is the default configuration used by Next.js:

    1. {
    2.   "plugins": [
    3.     "postcss-flexbugs-fixes",
    4.     [
    5.       "postcss-preset-env",
    6.       {
    7.         "autoprefixer": {
    8.           "flexbox": "no-2009"
    9.         },
    10.         "stage": 3,
    11.           "custom-properties": false
    12.         }
    13.       }
    14.     ]
    15.   ]
    16. }

    It is also possible to configure PostCSS with a postcss.config.js file, which is useful when you want to conditionally include plugins based on environment:

    Do not use require() to import the PostCSS Plugins. Plugins must be provided as strings.