CODEWITHSUNDEEP
cssvisual-studio-codeprettiertailwind-css
Thomas Gak-Deluen
Thomas Gak-Deluen

Reputation: 2971

TailwindCSS / Prettier adds space in @apply

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.

Solution

Prettier was not selected as the default formatter for CSS, only for TS and JS. Updating the default formatter for CSS to Prettier solved it.

Upvotes: 10

Views: 2804

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 25080

In the prettier version 2.1.1 and above it works just fine.

Make sure you have set the prettier as the default formatter

Upvotes: 0

Mohammed Abuhanifa
Mohammed Abuhanifa

Reputation: 23

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" },

Upvotes: 2

Related Questions