TailwindCSS / Prettier 在 @apply 中添加了空间

Question

我已经进行了 Prettier 设置，可以在 VSCode 中保存 CSS 文件时进行格式化。我在我的一个项目中使用 TailwindCSS 并使用1.7 中最新添加的内容，更漂亮地格式化文件并在单个冒号后添加一个空格，如下所示：

格式化前

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

格式化后

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

lg:在和之间添加一个空格flex-row。

有人知道如何解决这个问题吗？目前我只是忽略 CSS 文件来规避这个问题。

解决方案

Prettier 没有被选为 CSS 的默认格式化程序，仅适用于 TS 和 JS。将 CSS 的默认格式化程序更新为 Prettier 解决了这个问题。

Answer 1

在冒号 : 之后添加额外的空间并不是更漂亮，它是“esbenp.prettier-vscode”。要解决此问题，请像这样更改 settings.json 文件中的设置。 "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },