Tailwindcss / Vite / Vue - Using #{!important} - results in [vite] Internal server error: [postcss] Unknown word or with '!w-3' [vite] expected ";" - vuejs3

Question

dev dependencies
{
"vue": "^3.2.45",
"vite": "^4.0.3",
"sass": "^1.57.1",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4",
}
Vite.config.ts
import { defineConfig, type PluginOption } from 'vite'
import vue from '#vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint'
import { visualizer } from 'rollup-plugin-visualizer'
import type { UserConfig as VitestUserConfigInterface } from "vitest/config"
import dts from 'vite-plugin-dts'
import { resolve } from 'path'
const vitestConfig: VitestUserConfigInterface = {
test: {
globals: true,
environment: "jsdom",
},
}
export default defineConfig({
build: {
target: ['edge90', 'chrome90', 'firefox90', 'safari15'],
outDir: './dist',
lib: {
formats: ['es', 'cjs'],
entry: resolve(__dirname, './src/components/index.ts'),
name: 'Vuesty',
fileName: 'index',
},
rollupOptions: {
external: ['vue'],
output: { globals: { vue: 'Vue' } },
},
},
test: vitestConfig.test,
plugins: [vue(), eslintPlugin(),
dts({
beforeWriteFile: (filePath, content) => {
const newFilePath = filePath
.replace('/src', '/global');
return {
filePath: newFilePath,
content,
};
},
skipDiagnostics: true,
}),
visualizer({
emitFile: true
}) as PluginOption
],
})
avatar.scss
.v-avatar__status-circle_large{
#apply !w-2.5 ;
}
Avatar.vue
<style lang="scss">
#import "src/assets/themes/main/components/avatar.scss";
</style>
If i use global styles, not importing it directly into component then it works fine, but i need it exactly in the component
If the code is:
.v-avatar__status-circle_large{
#apply !w-2.5 ;
}
Then error is: [vite] Internal server error: [sass] expected ";".
And if the code is:
.v-avatar__status-circle_large{
#apply w-2.5 #{!important};
}
Error:[vite] Internal server error The important class does not exist. If important is a custom class, make sure it is defined within a #layer directive.