I'm using Storybook, Tailwind, and Vue. One of my Vue component have a style with lang="scss" and tried to use Tailwind's @apply for styling. It didn't take any effect. Although it works if the lang="scss" is removed. Any idea what's missing in the configuration?

Search.vue

<template>
  . . .
  <input
      type="search"
      placeholder="What are you searching for?"
      class="
        bg-lightest-blue
        text-blue text-lg text-opacity-70
        w-full
        focus:outline-none
      "
    />
  . . .
</template>

// If lang="scss" is removed, it works
<style lang="scss" scoped>
input::placeholder {
  @apply text-blue;
}

</style>

storybook/main.js

const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/source-loader",
  ],
  framework: "@storybook/vue3",
  webpackFinal: async (config) => {    
    // add SCSS support for CSS Modules
    config.module.rules.push({
      test: /\.scss$/,
      use: ["style-loader", "css-loader?modules&importLoaders", "sass-loader"],
      include: path.resolve(__dirname, "../"),
    });
    return config;
  },
};