PostCSS issues

[jdfwarrior]

Getting an error that PostCSS plugin tailwindcss requires PostCSS 8. The current package.json lists ^7 for PostCSS. Should this be updated?

[forsartis]

No, Vue CLI doesn't support PostCSS 8 yet. Therefore this plugin installs the PostCSS 7 compatibility build of Tailwind.
Can you check which tailwindcss version is installed? Should be tailwindcss@2.0.1-compat.
Maybe you installed tailwindcss manually via npm? Then running npm uninstall tailwindcss might solve the issue.

[jdfwarrior]

I had indeed manually updated tailwind at some point. I removed it and attempted to npm i -D vue-cli-plugin-tailwind@latest to update the current installation again and am back at

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Loading PostCSS Plugin failed: Cannot find module 'vue-cli-plugin-tailwind/purgecss'`

PostCSS config was:

module.exports = { plugins: { tailwindcss: {}, 'vue-cli-plugin-tailwind/purgecss': {}, autoprefixer: {} } };

But I removed the entry for the purgecss plugin and still get the same error

[forsartis]

Can you post full error message?
There must be another 'vue-cli-plugin-tailwind/purgecss' import somewhere else. Maybe in package.json or in a .postcssrc file.

[SimonPrague]

I have the same problem:
Error: Loading PostCSS Plugin failed: Cannot find module 'vue-cli-plugin-tailwind/purgecss'

Vue 3, Vue Cli, Typescript and Tailwind 2.0

Still can't make it work after the upgrade to Tailwind 2 ...

My postcss.config.js

module.exports = {
  'plugins': {
    'tailwindcss': './tailwind.config.js',
    'postcss-preset-env': {
      'stage': 3,
      'features': {
        'nesting-rules': true
      }
    },
    'vue-cli-plugin-tailwind/purgecss': {
      content: [`./public/**/*.html`, `./src/**/*.vue`],
      defaultExtractor(content) {
        const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
        return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[.A-Za-z0-9-_/]+/g) || []
      },
      whitelist: [],
      whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/],
      // rejected: true,
    },
  }
}

Should I change the vue-cli-plugin-tailwind/purgecss to something else?

[forsartis]

You need to remove the whole vue-cli-plugin-tailwind/purgecss block and configure PurgeCSS in your tailwind.config.js https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css

[SimonPrague]

Thanks, I did that but the build still fails because of:
TypeError: getProcessedPlugins is not a function
tailwindlabs/tailwindcss#2810