Want to take a look at our new docs? Our new docs are now in beta. Have fun!

How to add PostCSS plugins?

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

⚠️ Warning: 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')]
}

Contributors

Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us