必须同时满足三个条件才生效：Prettier已安装、插件在.prettierrc中声明、项目存在tailwind.config.js；仅处理静态class，不支持模板字符串等动态写法；VSCode需手动设置defaultFormatter为shufo.vscode-tailwindcss-class-sorter。
必须同时满足三个前提条件才生效
只装 prettier-plugin-tailwindcss 不会自动排序——它依赖 Prettier 本身存在、插件被正确加载、且项目有可读的 tailwind.config.js。缺一不可。
-
prettier必须作为开发依赖安装（不能只装插件）：运行npm install -D prettier prettier-plugin-tailwindcss -
.prettierrc或prettier.config.js中必须显式声明：{"plugins": ["prettier-plugin-tailwindcss"]} - 项目根目录下要有有效的
tailwind.config.js，哪怕只是空配置module.exports = {}；否则插件无法初始化 sortClasses 逻辑
静态 class 才会被处理，动态拼接全跳过
插件只扫描字面量字符串里的 class 或 className 值，不执行 JS、不解析模板字符串、不推断变量内容。
- ✅ 支持：
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={clsx('p-4', isActive && 'bg-blue-500')} - 若大量使用动态类名，建议收口到组件或改用
@apply，否则排序形同虚设
VSCode 里保存不排序？检查 defaultFormatter 设置
Prettier 配置正确 ≠ VSCode 会调用它——编辑器默认不把 HTML/JSX 文件的格式化请求转发给这个插件，必须手动指定格式化器 ID。
- 打开 VSCode 的
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"}- 注意：ID 是
shufo.vscode-tailwindcss-class-sorter，不是bradlc，也不是esbenp.prettier-vscode
排序逻辑不是字母序，而是复用 Tailwind 官方规则
它按实际 CSS 构建顺序分组：布局类（flex, grid）→ 尺寸间距（w-full, p-4）→ 视觉样式（bg-blue-500, text-white）→ 状态变体（hover:, focus:）→ 响应式前缀（md:p-4 必须紧邻 p-4）。
立即学习“前端免费学习笔记（深入）”；
- 能正确处理
peer-checked:scale-100这类复合变体，不会把它拆开或错位 - 深色模式类如
dark:bg-slate-800会被归入“视觉样式+dark”组，而非简单按dark:开头排到最前 - 插件在
plugins数组中**必须最后加载**，否则其他插件可能提前重排，破坏顺序
