How to add PostCSS plugins?

Recommended Method

If present, rename or delete the postcss.config.js in your project directory. Then, in your nuxt.config.js file add the following:

export default {
  build: {
    postcss: {
      // Add plugin names as key and arguments as value
      // Install them before as dependencies with npm or yarn
      plugins: {
        // Disable a plugin by passing false as value 
        'postcss-url': false,
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      preset: {
        // Change the postcss-preset-env settings
        autoprefixer: {
          grid: true

Legacy Method

** Attention: This is deprecated **

Use postcss.config.js, for example:

const join = require('path').join
const tailwindJS = join(__dirname, 'tailwind.js')

module.exports = {
  plugins: [require('tailwindcss')(tailwindJS), require('autoprefixer')]

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!