Sublime Text 中 tailwindcss-class-sorter 不生效的根本原因是插件未正确绑定到 HTML/Vue 等文件类型，且仅处理标准双引号包裹、无 JS 插值的单行 class 属性，不支持动态类名、多 class 属性或 JSX spread 语法。
为什么 tailwindcss-class-sorter 在 Sublime Text 里不生效
根本原因通常是插件未正确绑定到 .html 或 .vue 等文件类型，或者 Sublime Text 没有识别出 Tailwind 的 class 属性上下文。它默认只对 class= 属性值生效，且要求 class 字符串是单行、无换行/注释干扰的纯文本。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确认已安装
Package Control，再通过Package Control: Install Package安装tailwindcss-class-sorter - 打开一个
.html文件，按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入Sort Tailwind Classes—— 如果命令不可见，说明当前语法未被识别为 HTML/Vue/JSX - 检查右下角状态栏：应显示
HTML或Vue Component；若显示Plain Text，需手动点击切换语法（View → Syntax → HTML） - 确保 class 属性写法是标准的双引号包裹、无 JS 插值干扰，例如：
class="px-4 py-2 bg-blue-500 text-white rounded"可排序；而class={`px-4 ${isActive ? 'bg-blue-500' : 'bg-gray-200'}`}不支持
如何让插件自动排序 class 而非手动触发
Sublime Text 默认不提供“保存即排序”功能，tailwindcss-class-sorter 本身也不含保存钩子。要实现自动排序，必须借助 EventListener + 自定义插件，但更轻量的做法是绑定快捷键并养成习惯。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 打开
Preferences → Key Bindings，在右侧用户键位配置中添加：
[
{ "keys": ["ctrl+alt+s"], "command": "sort_tailwind_classes" }
]这样选中 class 值或光标停在 class 属性内时，按 Ctrl+Alt+S 即可即时排序
- 不要依赖“格式化 on save”，Sublime 原生无此能力；若强行用
sublimesyntax配合prettier，反而会破坏 class 排序逻辑（Prettier 不理解 Tailwind 顺序规则） - 对 Vue 单文件组件，需确保
<template>区块使用的是Vue Component语法，而非HTML—— 否则插件无法定位 class 属性
排序结果不符合预期：比如 flex 跑到了 justify-center 后面
这是插件默认排序策略与你项目约定不一致导致的。它按官方推荐顺序（如 display → flexbox → spacing）排列，但如果你团队自定义了层级（比如把 flex 归入 layout 类，放在 grid 之后），原生插件无法适配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 插件支持自定义排序规则：在
Preferences → Package Settings → tailwindcss-class-sorter → Settings中修改"sorting_order"数组 - 例如将
"flex"提前，需确保其所在分组（如"layout"）排在"flexbox"分组之前 - 注意：Tailwind v3.0+ 的 class 前缀（如
peer-、group-、dark:）会被自动识别并保持前缀完整性，但@apply中的 class 不处理 —— 这不是 bug，是设计限制 - 如果用了
!important（如!text-red-500），插件默认会把它移到末尾；如需保留位置，得关闭"move_important_to_end"选项
和 VS Code 的 tailwindcss-class-sorter 行为不一致
Sublime 版本基于 Python 实现，VS Code 版本基于 TypeScript，两者解析 HTML AST 的方式不同，尤其在处理嵌套属性、多 class 属性（如 class="a" class="b"）、或 JSX 中的 spread 操作时，Sublime 更保守 —— 它只处理明确的 class= 字符串，不尝试推断运行时合并逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免在 Sublime 中编辑含动态 class 拼接的 JSX/TSX 文件；这类场景更适合用 VS Code +
prettier-plugin-tailwindcss - Sublime 插件不支持
aria-*、data-*属性中的 class 提取，这点和 VS Code 插件不同，别指望它处理data-class="mt-2" - 性能上，Sublime 对大文件（>2000 行）排序略慢，且不支持异步处理；若频繁卡顿，建议只在编辑小片段时使用，而非整页格式化
真正麻烦的不是怎么装插件，而是搞清它「不做什么」—— 它不解析 JS、不执行模板、不跨标签聚合 class，只做一件事：在你给定的字符串里，按规则重排 Tailwind class。守住这个边界，才能用得稳。
