VSCode on Save adding space after colon (:)

[user3470]

I'm trying to do

@apply hover:tw-bg-primary;

On Save it updates to

@apply hover: tw-bg-primary;

With a space in it, I can't get rid of it. Please help

[phojie]

any updates on this one ?

[gerrcass]

I was struggling with this for a while. This only happened to me in the app.css file where I put the Tailwind directives (inside @layer base declaration). I managed to fix it like this:

1. Add a .vscode/settings.json file.
2. Paste the following.

{ "css.lint.unknownAtRules": "ignore", "[css]": { "editor.defaultFormatter": "bradlc.vscode-tailwindcss" } }

Let me know if there is any better solution

[rnrnshn]

Thanks. This has solved the issues

[ErisonSales]

Thank you problem solved

[kenshinman]

I want to buy you a drink for this 😁 @gerrcass

[gerrcass]

haha, you're welcome😂

Note that this code also works:

.vscode/settings.json

"files.associations": {
  "*.css": "tailwindcss"
}

[atonse]

I found a "cleaner" solution in the official TailwindCSS VSCode Extension readme – to associate all css files as tailwindcss files. By just doing this, tailwind probably uses its internal formatter and my css files don't get messed up anymore.

Place this in your .vscode/settings.json

"files.associations": {
  "*.css": "tailwindcss"
}

[atonse]

Thank you for the reply – I modified my original comment to clarify where to put it.

[gabeboisvert]

Worked for me as well!

[joffreyBerrier]

Doesn't work for me I'm using css in a .vue file, not a dedicated file .css
Any solution for .vue file ? My solution is to change md:to @screen md {} ...

[jamessoncardozo]

Thank you, @atonse. 👍

@DevYemi this can be added to your .vscode/settings.json if you open that folder as a workspace directly. You can also add a file association in the settings editor (File > Preferences > Settings) under Text Editor > Files. Enter *.css for the item, and tailwindcss for the value.

Thanks for your help. This save my day.

[exort-apps]

This helped for the Tailwind project, but will it affect CSS files when not using Tailwind?

[wlkns]

For anyone using Vue with Volar and the included formatter, this issue is still present because it reverts back to https://github.com/microsoft/vscode-css-languageservice behaviour on .vue files.

Read more @ vuejs/language-tools#1448

[WilliamYi74]

i also get this problem inside .vue style, have any solution?

[ankush981]

I solved it by changing the default CSS formatter from VSCode one to Prettier+. Looks like the built-in formatter isn't aware of Tailwind-style stuff. 🤷🏻‍♂️