How can I auto-format the style block in vue3 properly with TailwindCSS with colon character? - visual-studio-code

Question

I have a vue file with a style block like this, using TailwindCSS and PostCSS
<style scoped lang="postcss">
.button {
#apply bg-green-200 hover:bg-green-400;
}
</style>
In VSCode, with the Volar extension, I can perform auto-format. However, after auto-format, my style looks like this
<style scoped lang="postcss">
.button {
#apply bg-green-200 hover: bg-green-400; # notice the space after hover:
}
</style>
This breaks TailwindCSS because it would treat "hover:" and "bg-green-400" as 2 separate classes.
What can I adjust to improve on this? I don't see a lot of option when trying to create ".vscode/settings.json" myself to control Volar.
I am using:
Vue 3
Nuxt 3
TailwindCSS 3
Volar VSCode extension
VSCode
Update
I don't have any vscode setting in the root directory. Here is my VSCode global settings
{
"git.autofetch": true,
"explorer.confirmDragAndDrop": false,
"git.confirmSync": false,
"files.associations": {
"*.rmd": "markdown"
},
"workbench.editorAssociations": {
"*.ipynb": "jupyter-notebook",
"*.wasm": "default"
},
"terminal.integrated.inheritEnv": false,
"files.autoSave": "afterDelay",
"git.suggestSmartCommit": false,
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.rulers": [
80
],
"editor.selectionHighlight": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": false
},
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"files.watcherExclude": {
"**/.bloop": true,
"**/.metals": true,
"**/.ammonite": true
},
"workbench.productIconTheme": "fluent-icons",
"jupyter.askForKernelRestart": false,
"security.workspace.trust.untrustedFiles": "open",
"notebook.cellToolbarLocation": {
"default": "right",
"jupyter-notebook": "left"
},
"diffEditor.ignoreTrimWhitespace": false,
"redhat.telemetry.enabled": false,
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"[python]": {
"editor.defaultFormatter": "ms-python.python"
},
"liveServer.settings.donotShowInfoMsg": true,
"editor.inlineSuggest.enabled": true,
"github.copilot.enable": {
"*": true,
"yaml": false,
"plaintext": false,
"markdown": false,
"scala": false,
"properties": false,
"rust": false,
"python": false,
"typescript": false,
"http": false,
"vue": false
},
"[java]": {
"editor.defaultFormatter": "scalameta.metals"
},
"files.autoSaveDelay": 1500,
"[typescript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"remote.SSH.defaultExtensions": [
"gitpod.gitpod-remote-ssh"
],
"remote.SSH.configFile": "/var/folders/rz/j1sp0c394pn5sv5pttp2pkt40000gn/T/gitpod_ssh_config-55598-oizqwPMdK6La",
"terminal.integrated.fontFamily": "JetBrainsMono Nerd Font Mono",
"terminal.integrated.fontSize": 13,
"editor.fontFamily": "JetBrainsMono Nerd Font Mono",
"editor.fontSize": 13,
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"[postcss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

Answer 1

I'm facing the same issue as you. What I can do now is install the postcss-nesting package add it to the postcss.config.js file:
module.exports = {
plugins: {
'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
}
In the style tag, you can do something like this:
<style scoped lang="postcss">
.button {
#apply bg-green-200;
&:hover {
#apply bg-green-400;
}
}
</style>