How do I use `localIdentName` with vue-cli

Question

I'm trying to randomize/minify generated class names.

Currently I'm using a fairly vanilla vue-cli project, and I'm also using Tailwind css which I hope doesn't complicate anything.

Currently this is how far I got in my vue.config.js by reading vue-loader docs, this, and this, however this only works half way... my CSS minifies perfectly, however my vue component classes dont' change, so its like it's not parsing *.vue files.

I thought this could be because I notice it mentioning using <style scoped> but with Tailwind you don't need style tags in your components. Quite literally 100% of the css is contained in my src/assets/styles/main.pcss file, which consists of a few @import statements and that's it.

module.exports = {
  css: {
    requireModuleExtension: false,
    loaderOptions: {
      css: {
        modules: {
          localIdentName: '[hash:6]',
        },
      },
    },
  },
  chainWebpack: config => {
    // disable eslint temporarily
    config.module.rules.delete('eslint');
  },
};

And my tailwind config:

module.exports = {
  future: {
    purgeLayersByDefault: true,
    removeDeprecatedGapUtilities: true,
  },
  plugins: [],
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
  ],
  theme: {},
};