如何实现Tailwindcss的Prettier

有没有人和我一样看了 Tailwind CSS 的 Prettier 插件教程，但是不知道怎么在 Next.js 项目上具体配置使用？

这篇文章将直接给出完整的配置方案，让你快速实现 Tailwind CSS 类名的自动排序！

快速配置方案

如果你和我一样，看了 Tailwind CSS 官方的博客教程，尝试配置 Tailwind CSS 的 Prettier，但是不知到怎样配置 config。

那么你可以直接：把下面这截内容复制到 package.json 的对应位置！

{
  // ... 其他配置
  "prettier": {
    "plugins": ["prettier-plugin-tailwindcss"]
  }
}

完成！ 🎉

完整设置步骤

npm install -D prettier prettier-plugin-tailwindcss

{
  "name": "your-project-name",
  "version": "1.0.0",
  // ... 其他配置
  "prettier": {
    "plugins": ["prettier-plugin-tailwindcss"]
  }
}

<div className="rounded-lg bg-blue-500 px-4 text-white shadow-md sm:px-8 lg:px-16">
  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>

常见问题解决

VSCode 报错：找不到格式化程序

如果没有起作用，并且收到 VSCode 的警告提示，就按照提示的说明尝试修复。

最常见的报错是缺少 Prettier formatter。这意味着 VSCode 不知道按照什么方式美化你的代码。

解决方案：

1. 在 VSCode 插件商店搜索 "Prettier - Code formatter"
2. 安装官方的 Prettier 插件
3. 安装后再次尝试快捷键 Shift+Alt+F

其他配置选项

如果你需要更多的 Prettier 配置，可以在 package.json 中添加：

{
  "prettier": {
    "plugins": ["prettier-plugin-tailwindcss"],
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5"
  }
}

类名排序规则

Tailwind CSS Prettier 插件会按照以下优先级排序类名：

1. Base styles - container, box-border 等
2. Component classes - btn, card 等自定义组件类
3. Utilities - flex, text-center, bg-blue-500 等
4. Responsive variants - sm:, md:, lg: 等
5. State variants - hover:, focus:, active: 等

参考资料

这个配置方案来自 Tailwind CSS 官方教程：

Automatic Class Sorting with Prettier - Tailwind CSS

官方教程详细解释了类名排序的逻辑和更多高级配置选项。

总结

通过这个简单的配置，你就可以：

• ✅ 自动排序 Tailwind CSS 类名
• ✅ 提高代码的可读性和一致性
• ✅ 遵循 Tailwind CSS 官方推荐的最佳实践
• ✅ 在团队协作中保持代码风格统一

现在你可以专注于写代码，而不用担心类名的排序问题了！

👋 关于我
我是一个正在学习和实现网站开发的开发者，希望在今年运营出一个 MRR $100 的作品。
如果你发现了什么问题、可改进的地方，或者只是想随意地聊聊天，都非常欢迎联系我！
即刻 @Sawana | X @HSawana9