安装 prettier-plugin-tailwindcss 并正确配置后，可自动按 tailwind 官方顺序排序静态 class 名；需同时满足 prettier 已安装、插件已添加为依赖、且在 .prettierrc 中声明 plugins；仅处理静态 class 值，不支持模板字符串等动态写法；vscode 需手动设置 defaultformatter 为 shufo.vscode-tailwindcss-class-sorter 并启用 formatonsave。
直接装 prettier-plugin-tailwindcss 并配进 Prettier，就能自动按 Tailwind 官方顺序排类名；它不是简单字母排序，而是复用 sortClasses 逻辑，能正确处理 peer-checked:scale-100、dark:bg-slate-800 这类复合变体。
安装和基础配置必须一步到位
只装插件不生效，必须同时满足三个条件：Prettier 本身已安装、插件作为依赖加入、且在 Prettier 配置中显式声明。缺一不可。
- 运行
npm install -D prettier prettier-plugin-tailwindcss（或yarn add -D prettier prettier-plugin-tailwindcss） - 创建
.prettierrc或.prettierrc.json，内容至少包含：{"plugins": ["prettier-plugin-tailwindcss"]} - 确保项目根目录下有有效的
tailwind.config.js，否则插件无法读取自定义配置（比如你加了theme.extend或新变体）
动态 class 字符串不会被排序，这是设计使然
prettier-plugin-tailwindcss 只扫描静态 class 属性值，对模板字符串、三元表达式、className={clsx(...)} 等完全跳过——它不执行 JS，也不做 AST 动态分析。
- 支持的写法：
class="p-4 bg-blue-500 hover:bg-blue-600"、className="flex items-center text-sm" - 不支持的写法：
class={`p-4 ${isActive ? 'bg-blue-500' : 'bg-gray-200'}`}、className={twMerge('p-4', isActive && 'bg-blue-500')} - 若大量使用动态拼接，建议封装成组件或改用
@apply收口，避免类名散落难维护
VSCode 里保存即排序，但 defaultFormatter 容易填错
即使 Prettier 配置正确，VSCode 默认也不会把格式化请求转给这个插件——它需要你手动指定语言对应的默认格式化器，且作者 ID 必须是 shufo.vscode-tailwindcss-class-sorter（注意不是 bradlc，也不是 prettier 自身）。
- 打开
settings.json，添加对应语言块："[html]": { "editor.defaultFormatter": "shufo.vscode-tailwindcss-class-sorter" }, "[javascriptreact]": { "editor.defaultFormatter": "shufo.vscode-tailwindcss-class-sorter" }, "[typescriptreact]": { "editor.defaultFormatter": "shufo.vscode-tailwindcss-class-sorter" } - 务必开启
"editor.formatOnSave": true - 如果同时用了 ESLint + Prettier，要确认 ESLint 的格式化功能已禁用（如关闭
eslint.format.enable），否则二者会打架
最常被忽略的一点：插件排序逻辑严格绑定当前 tailwind.config.js 中定义的变体（如 darkMode: 'class'）、前缀（prefix）、以及 content 扫描路径——如果配置文件里没开 dark，那 dark:bg-black 就会被当成普通未定义类排到最前面，而不是归入“深色模式视觉样式”组。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
