如何在 Next.js 项目中配置 Tailwind CSS 的 Prettier 自动排序（2026 版）

这篇文章把 2024 年那版旧文重新收了一遍。核心思路没错，还是 prettier-plugin-tailwindcss 接管格式化，但旧文里有几个地方会让人绕路：

• 只提了 package.json 配置，没有讲现在更常见的 prettier.config.js
• “排序前后”的示例写成了同一段代码，读者根本看不出变化
• 没有讲 VSCode 为什么有时装了插件还是不生效

如果你现在在用 Next.js + Tailwind CSS，想让保存文件时自动排好类名，这篇就够了。

先把能用的配置贴出来

到 2026 年，这件事本身还是很简单：

1. 安装 prettier 和 prettier-plugin-tailwindcss
2. 在 prettier.config.js 或 package.json 里声明插件
3. 确保编辑器真的在用 Prettier 作为 formatter

我现在会直接这样配：

/** @type {import('prettier').Config} */
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

只要这三步都到位，Tailwind 的 class 排序通常就会自动生效。

什么时候你需要这个插件

你大概会在这些时候开始需要它：

• className 越写越长，读起来很乱
• 团队里每个人写 Tailwind 的顺序都不一样
• 代码 review 时经常出现无意义的 class 顺序变更
• VSCode 能格式化代码，但 Tailwind 类名并没有按官方顺序重排

这个插件的价值不在于“更漂亮”，而在于让 Tailwind class 顺序变成一件不用思考的事。

package.json 还是 prettier.config.js

两种写法都能工作。我更偏向独立的 Prettier 配置文件：

• package.json
  • 适合配置极少、项目很小的时候
• prettier.config.js
  • 适合中长期项目
  • 更清楚
  • 后面加更多 Prettier 选项时不容易乱

如果你的项目里已经有 prettier.config.js，那就不要再把同一份配置塞回 package.json 了，直接在现有配置上加插件即可。

完整配置步骤

npm install -D prettier prettier-plugin-tailwindcss

/** @type {import('prettier').Config} */
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

/** @type {import('prettier').Config} */
module.exports = {
  semi: true,
  singleQuote: false,
  plugins: ["prettier-plugin-tailwindcss"],
};

{
  "prettier": {
    "plugins": ["prettier-plugin-tailwindcss"]
  }
}

<div className="lg:px-16 text-white rounded-lg sm:px-8 shadow-md px-4 bg-blue-500">
  Hello World
</div>

<div className="rounded-lg bg-blue-500 px-4 text-white shadow-md sm:px-8 lg:px-16">
  Hello World
</div>

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

两个最常见的“不生效”原因

1. 你装了插件，但编辑器没在用 Prettier

这是最常见的问题。VSCode 可以同时安装多个 formatter，如果默认 formatter 不是 Prettier，Tailwind 插件自然不会运行。

2. 你改了 package.json，但项目里其实已经有 prettier.config.js

如果两个地方都写了配置，后续排查会变得很混乱。最稳妥的策略是：

• 二选一
• 对中大型项目优先使用 standalone 配置文件

进阶：如果你想让插件处理更多地方

根据 prettier-plugin-tailwindcss 官方仓库，这个插件除了能排序常见的 class / className，还支持扩展到更多属性和函数调用。

例如，你可以进一步配置：

/** @type {import('prettier').Config} */
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
  tailwindAttributes: ["myClassList"],
  tailwindFunctions: ["clsx", "cva"],
};

这类配置不是入门必需，但当你的项目开始大量使用 clsx、cva 或自定义属性时，会非常有价值。

这次顺手改掉的几个坑

这次主要收掉了这些问题：

• 把标题和正文中的 Tailwindcss、Nextjs、pretier 改成正确写法
• 明确区分了 package.json 配置和 prettier.config.js 配置
• 修正了原文里“排序前后示例一样”的错误
• 补上了 VSCode 默认 formatter 这个最关键的排障点
• 补上了插件的进阶能力，没有停在最小配置那一步

总结

这事说到底只有两个检查点：插件有没有装好，编辑器是不是确实在调用 Prettier。两边都对了，Tailwind 类名排序基本就会自己工作。对新项目，我会直接建 prettier.config.js；对旧项目，先把配置收拢到一个地方，再确认 format on save 和默认 formatter 没跑偏。

参考资料

• Automatic Class Sorting with Prettier - Tailwind CSS
• prettier-plugin-tailwindcss
• Prettier Configuration File
• Prettier VSCode Extension