使用 Prettier 自动排序 Tailwind CSS 类名

安装插件#

首先安装插件 prettier-plugin-tailwindcss 为开发依赖项：

1
pnpm add -D prettier prettier-plugin-tailwindcss

然后在项目根目录下创建一个名为 .prettierrc 的配置文件，内容如下：

1
{
2
  "plugins": ["prettier-plugin-tailwindcss"]
3
}

使用插件#

之后你可以在 package.json 文件中添加一个脚本来运行 Prettier：

1
{
2
  "scripts": {
3
    "format": "prettier --write --log-level warn ."
4
  }
5
}

这样你就能通过运行 pnpm format 来自动排序 Tailwind CSS 类名了。

为了方便起见，你也可以在 VS Code 中安装 Prettier - Code formatter 插件，这样每次写完一部分样式就可以使用快捷键进行格式化。

对函数调用中的类进行排序#

如果你在项目中使用了 clsx 来动态组合类名，你可以在 .prettierrc 的配置文件中添加以下内容：

1
{
2
  "tailwindFunctions": ["clsx"]
3
}

这样，Prettier 就会在格式化时自动对 clsx 函数中的类名进行排序。