tailwind类名排序不生效，主因是vscode未正确配置格式化链路：需开启formatonsave、精确设置defaultformatter为shufo.vscode-tailwindcss-class-sorter，并为html/jsx/tsx分别配置；headwind需更新defaultsortorder为官方v4顺序；动态classname须通过classregex正则匹配；排序与补全功能独立，需单独确保tailwind.config.js加载及quicksuggestions.strings启用。
Tailwind 类名排序不生效，90% 不是插件没装，而是 VSCode 没被明确告知“该用谁、在哪儿、什么时候排”。
tailwindcss-class-sorter 保存后不自动排序？缺这两步
插件本身不接管保存行为，必须手动绑定格式化链路。VSCode 默认对 class 属性不做任何格式化，哪怕插件已安装并启用。
-
editor.formatOnSave必须设为true（全局或工作区） - 对应语言的
editor.defaultFormatter必须精确指向shufo.vscode-tailwindcss-class-sorter，不是bradlc.vscode-tailwindcss，也不是其他 ID - 只配
[html]不够——JSX/TSX 文件需单独配[javascriptreact]和[typescriptreact]，否则className不触发
Headwind 排序结果和官方推荐顺序不符？改 defaultSortOrder
Headwind 默认使用 Tailwind v2 的旧排序逻辑（如 flex 在 justify-center 前），而 v3/v4 官方推荐顺序已在 @tailwindcss/eslint-plugin 中定义。直接沿用会导致 lint 报错或团队风格不一致。
- 打开 VSCode 设置 → 搜索
headwind.defaultSortOrder - 粘贴 Tailwind 官方最新顺序（可从
tailwindcss-config-viewer或 v4 文档的 class order 表格中复制） - 顺序数组里每个字符串必须是合法类前缀，比如
"flex"、"justify"、"items"，不能写成"flex-1"这种具体值
动态 className（如 cn()、模板字符串）无法排序？靠 classRegex
插件默认只识别 class="..." 和 className="..." 字面量。一旦你用 cn()、tw() 或带三元表达式的模板字符串，就必须显式告诉插件“从哪段文本里抽类名”。
- 在
settings.json的tailwindCSS节点下加experimental.classRegex - 至少包含三条正则：
"className\s*=\s*["'`]([^"'`]*)["'`]+"（匹配 JSX）、"class\s*=\s*["'`]([^"'`]*)["'`]+"（匹配 HTML）、"cn\s*\(\s*(["'`][^"'`]*["'`])"（匹配cn("...")） - 正则不支持嵌套插值：
className={`${base} ${active ? 'text-blue' : ''}`}中的${active ? ...}部分会被跳过，只排静态字符串
排序后颜色预览/悬停失效？补全和排序是两套系统
类名排序插件（tailwindcss-class-sorter 或 Headwind）和类名补全插件（bradlc.vscode-tailwindcss）完全独立。排序生效 ≠ 补全生效，反之亦然。常见误判是“排好了但悬停没反应”，其实是补全链路断了。
- 检查右下角状态栏是否显示
Tailwind CSS图标——不显示说明tailwind.config.js未加载（路径错、导出非法、content 漏扩展名） -
editor.quickSuggestions.strings必须为true，否则连bg-开头的提示都不会弹 - 语言模式必须是
HTML、TypeScript React等，不能是Plain Text或JavaScript
最常被忽略的是：排序插件不校验类名合法性，它只管顺序。一个拼错的 bg-bule-500 会被照常排到 bg- 区块里，但悬停不会显示样式——得靠补全插件的实时提示来发现拼写错误，而不是靠排序结果判断对错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
