Storybook: Adding the webpack config fails silently

[blowsie]

I tried adding the config suggested on the readme to an empty storybook vue 3 application and it fails silently, resulting in no styles in the storybook instance.

.storybook/main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-postcss",
  ],
  webpackFinal: async (config, {configType}) => {
    console.log(config.module.rules)
    config.module.rules.push({
      test: /\.vue$/,
      use: [{
        loader: 'vue-windicss-preprocess',
        options: {
          config: "tailwind.config.js",  // tailwind config file path OR config object (optional)
          compile: false,                // false: interpretation mode; true: compilation mode
          globalPreflight: true,         // set preflight style is global or scoped
          globalUtility: true,           // set utility style is global or scoped
          prefix: 'windi-'               // set compilation mode style prefix
        }
      }]
    })

    // Return the altered config
    return config;
  },
}

Here are the existing module rules for reference

[
  {
    test: /\.(mjs|tsx?|jsx?)$/,
    use: [ [Object] ],
    include: [ 'C:\\Projects\\my-project\\web\\vue\\apps\\rmt\\' ],
    exclude: /node_modules/
  },
  { test: /\.js$/, use: [ [Object] ], include: [Function: include] },
  { test: /\.md$/, use: [ [Object] ] },
  {
    test: /\.vue$/,
    loader: 'C:\\Projects\\my-project\\web\\vue\\apps\\rmt\\node_modules\\vue-loader\\dist\\index.js',
    options: {}
  },
  { test: /\.tsx?$/, use: [ [Object] ] },
  {
    test: /\.js$/,
    include: /node_modules\\acorn-jsx/,
    use: [ [Object] ]
  },
  { test: /(stories|story)\.mdx$/, use: [ [Object], [Object] ] },
  {
    test: /\.mdx$/,
    exclude: /(stories|story)\.mdx$/,
    use: [ [Object], [Object] ]
  },
  {
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: 'C:\\Projects\\my-project\\web\\vue\\apps\\rmt\\node_modules\\@storybook\\source-loader\\dist\\cjs\\index.js',
    options: { injectStoryParameters: true, inspectLocalDependencies: true },
    enforce: 'pre'
  },
  {
    test: /\.css$/,
    sideEffects: true,
    use: [ [Object], [Object], [Object] ]
  },
  {},
  {
    test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
    loader: 'C:\\Projects\\my-project\\web\\vue\\apps\\rmt\\node_modules\\file-loader\\dist\\cjs.js',
    options: { name: 'static/media/[name].[hash:8].[ext]' }
  },
  {
    test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
    loader: 'C:\\Projects\\my-project\\web\\vue\\apps\\rmt\\node_modules\\url-loader\\dist\\cjs.js',
    options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
  },
  {
    test: /\.vue$/,
    loader: 'C:\\Projects\\my-project\\web\\vue\\apps\\rmt\\node_modules\\vue-docgen-loader\\lib\\index.js',
    enforce: 'post',
    options: { docgenOptions: [Object] }
  }
]

[blowsie]

Update: I also tried to configure the plugin on an empty vue 3 cli project and ran into the same issue

It appears to be ignoring any styles found in the sty;e block of an SFC

<style scoped>
a {
  color: #42b983;
  @apply bg-red-500;
}
</style>

Both color and @apply are ignored, adding tailwind classes directly on to the html works as expected.