rollup: how to rollup tailwind scss in Vue sfc?

I'm trying to build a component library using Vue.js3, Rollup.js, and Tailwind CSS.

configs

package.json

{
    "private": true,
    "main": "dist/plugin.js",
    "module": "dist/plugin.mjs",
    "files": [
        "dist/*"
    ],
    "scripts": {
        "dev": "vite",
        "build": "rollup -c"
    },
    "peerDependencies": {
        "vue": "^3.2.37"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^3.0.1",
        "@vue/compiler-sfc": "^3.2.37",
        "autoprefixer": "^10.4.8",
        "postcss": "^8.4.16",
        "rollup": "^2.77.2",
        "rollup-plugin-vue": "^6.0.0",
        "sass": "^1.54.4",
        "tailwindcss": "^3.1.8",
        "vite": "^3.0.4"
    }
}

rollup.config.js

import vue from 'rollup-plugin-vue';
import packageJSON from './package.json';

export default [
    {
        input: 'src/index.js',
        output: [
            {
                format: 'esm',
                file: packageJSON.module,
                sourcemap: true,
            },
            {
                format: 'cjs',
                file: packageJSON.main,
                sourcemap: true,
            }
        ],
        plugins: [
            vue({
                css: true
            }),
        ]
    }
];

test component

Then I got a component styled via scss inside of vue sfc powered by tailwindcss:

src/components/test.vue

<template>
    <p
        class="test">
        test component
    </p>
</template>

<style lang="scss">
.test {
    @apply text-white bg-red-500;
}
</style>

src/components/index.js

import test from './test.vue';
export default {
    test
}

src/index.js

import components from './components/index.js';
const plugin = {
    install(app, options) {
        app.component('test', components.test);
    }
}
export default plugin;

error

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) src/components/test.vue?vue&type=style&index=0&id=e43c18bc&lang.scss (2:0) 1: 2: .test { ^ 3: @apply text-white bg-red-500; 4: }

online reproduction

run npm run build in online reproduction

So, how can I use scss with tailwindcss in rollup to build a package?

I've googled this but nothing helps. Thanks a lot for your patience！