318 字
1 分钟
使用 Prettier 自动排序 Tailwind CSS 类名
最近在学习 Next.js，在使用 Tailwind CSS 时，看到 Tailwind 官方的一篇文章：Automatic Class Sorting with Prettier，里面介绍了如何使用 Prettier 插件来自动排序 Tailwind CSS 类名。
我觉得这个功能对于强迫症的我来说还是非常有用的，这里就简单地记录一下使用教程。
这里只是简单的介绍和使用，更多的用法可以查看 prettier-plugin-tailwindcss。
安装插件
首先安装插件 prettier-plugin-tailwindcss 为开发依赖项：
pnpm add -D prettier prettier-plugin-tailwindcss然后在项目根目录下创建一个名为 .prettierrc 的配置文件，内容如下：
{ "plugins": ["prettier-plugin-tailwindcss"]}使用插件
之后你可以在 package.json 文件中添加一个脚本来运行 Prettier：
{ "scripts": { "format": "prettier --write --log-level warn ." }}这样你就能通过运行 pnpm format 来自动排序 Tailwind CSS 类名了。
为了方便起见，你也可以在 VS Code 中安装 Prettier - Code formatter 插件，这样每次写完一部分样式就可以使用快捷键进行格式化。
对函数调用中的类进行排序
如果你在项目中使用了 clsx 来动态组合类名，你可以在 .prettierrc 的配置文件中添加以下内容：
{ "tailwindFunctions": ["clsx"]}这样，Prettier 就会在格式化时自动对 clsx 函数中的类名进行排序。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
使用 Prettier 自动排序 Tailwind CSS 类名
https://blog.zsdy.dev/posts/automatic-class-sorting-for-tailwind-css-with-prettier 部分信息可能已经过时
相关文章 智能推荐
1
使用 Prettier 对 Import 进行排序
学习笔记 使用 Prettier 来自动排序 JavaScript/TypeScript 文件中的 import 语句。
2
使用 AI Agent 做 SEO 优化：OpenSEO 开源平台部署与实战
学习笔记 Docker 一键部署 OpenSEO，接入 GSC / GA4 / DataForSEO 数据源，并通过 MCP 让 AI Agent 自动化执行站点审计、关键词研究与竞品洞察，输出可落地、可验证的 SEO 决策指南。
3
不用向量数据库，如何搭建一个由 LLM 自动维护的个人 Wiki
学习笔记 如何搭建一个由 LLM 自动整理和维护的个人 Wiki，将原始资料持续编译为结构化、可追溯、可增长的知识库，而不依赖传统 RAG 流程。
4
HTTP 缓存机制拆解：匹配、新鲜度与重新验证
学习笔记 从 HTTP 缓存的存储、匹配、新鲜度与重新验证解释浏览器缓存，并给出静态资源、HTML 和私有数据的配置思路。
5
Web Worker 使用教程
学习笔记 了解什么是 Web Worker 及其工作原理，学习如何在前端项目中使用 Web Worker 来提升性能和用户体验。