TailwindCSS / Prettier adds space in @apply

user_1232796 0
Viewed 1164

I've got Prettier setup to format on save my CSS files in VSCode. I'm using TailwindCSS in one of my projects and using the latest addition in 1.7, prettier formats the file and adds a space after a single colon like so:

Before formatting

.container {
  @apply flex;
  @apply flex-col;
  @apply lg:flex-row;
}

After formatting

.container {
  @apply flex;
  @apply flex-col;
  @apply lg: flex-row;
}

Adding a space between lg: and flex-row.

Does anybody know how to fix this? At the moment I'm just ignoring CSS files to circumvent the issue.

Thanks for your help.

prettier tailwind-css visual-studio-code css
1 Answers

it is not prettier that adds extra space after colon : , it "esbenp.prettier-vscode". to solve this problem change this settings in your settings.json file like this. "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },

user_181067590
Related