have problem with tailwind and code formatter - tailwind-css

Question

I'm using Nuxt 3 and tailwind to gether .
package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"#intlify/unplugin-vue-i18n": "^0.7.0",
"#intlify/vite-plugin-vue-i18n": "^6.0.3",
"#nuxtjs/tailwindcss": "^5.3.3",
"nuxt": "3.0.0-rc.10",
"sass": "^1.55.0",
"sass-loader": "10.1.1",
"tailwindcss-flip": "^1.0.0",
"vue-i18n": "^9.2.2"
},
"dependencies": {
"#heroicons/vue": "^2.0.11",
"#kyvg/vue3-notification": "^2.4.1",
"#nuxt-hero-icons/outline": "^1.0.1",
"#nuxt-hero-icons/solid": "^1.0.1",
"#pinia/nuxt": "^0.4.2",
"#vueform/multiselect": "^2.5.2",
"axios": "^0.27.2",
"daisyui": "^2.28.0",
"jenesius-vue-modal": "^1.7.2",
"sweetalert2": "^11.4.33",
"vee-validate": "^4.6.7",
"vue-recaptcha-v3": "^2.0.1",
"vue3-loading-overlay": "^0.0.0",
"yup": "^0.32.11"
}
}
the problem is that every time that I format the code,
formatter puts some space in tailwind classed and this cause error
[between md: and flex ]
<style lang="scss">
.navbar {
#apply md: flex ;
}
<style>
What should I do ?
nuxt.config.ts
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '#intlify/unplugin-vue-i18n/vite'
import path from 'path'
export default defineNuxtConfig({
modules: [
'#pinia/nuxt','#nuxtjs/tailwindcss' ,'#nuxt-hero-icons/outline/nuxt','#nuxt-hero-icons/solid/nuxt'
],
runtimeConfig: {
public: {
captchaKey: 'a',
apiUrl:'z'
}
},
vite: {
plugins: [
VueI18nVitePlugin({
include: [
resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.ts'),
path.resolve(__dirname, './components/*.*'),
path.resolve(__dirname, './pages/*.*'),
]
})
]
},
css:[
'~/assets/base.css'
]
})