Inline Fold 是专为折叠 HTML/JSX 中 class/className 属性值设计的轻量插件，需手动配置 languages 规则（如 {"language": "html", "attribute": "class"}）才生效，不识别 Tailwind 语义，仅视觉压缩为 tw:… 占位符。
Inline Fold 插件不叫 Tailwind-Fold
VSCode 没有官方或主流社区维护的名为 Tailwind-Fold 的插件。你实际想找的是 Inline Fold（作者 aaron-bond），它支持折叠 HTML/JSX 中的 class 和 className 属性值，是目前最稳定、轻量且专为此场景设计的方案。名字里带 “Tailwind” 的扩展多为过时、功能重叠或已停止维护，强行安装可能引发语法高亮冲突或折叠失效。
必须手动配置 language 绑定才能折叠 class
装完 Inline Fold 后默认不生效——它不会自动识别 class 或 className。你得在 settings.json 里显式声明哪些语言、哪些属性要折叠：
-
"inlineFold.languages"是数组，每个元素是{"language": "html", "attribute": "class"}这样的对象 - JSX 必须单独配
{"language": "javascriptreact", "attribute": "className"}，不能只写javascript - 如果用 TypeScript React，还要加
{"language": "typescriptreact", "attribute": "className"} - 路径中含空格或特殊字符（如
my-project (v2)）可能导致配置加载失败，建议工作区路径用纯英文+下划线
折叠后显示 tw:… 占位符，但别指望它智能压缩
Inline Fold 默认把整个 class 值替换成 tw:…，不分析 Tailwind 类名语义，也不合并 mt-2 mb-2 → my-2。它只是视觉收起，不影响代码行为。如果你看到占位符没出现，检查以下几点：
- 光标是否停在
class="..."或className={...}行内？折叠只在属性值所在行触发显示 - 是否误用了单引号或模板字符串：
className={`text-red ${cond ? 'font-bold' : ''}`}—— 这种动态拼接会被整个折叠，但无法拆解内部逻辑 - VSCode 是否正在用
Plain Text模式打开文件？右下角语言标识必须是HTML或JavaScript React - 某些格式化扩展（如旧版
Prettier）会在保存时重排属性顺序，导致折叠状态重置；可临时禁用验证
折叠状态不保存，且无法按层级展开
每次重新打开文件，所有 class 都是展开状态；Inline Fold 不记录上次折叠了哪几处。更关键的是：它不支持“逐级展开”，比如先看到 tw:…，点一下展开全部类名，再点一下不能只展开前 5 个——要么全展，要么全折。如果你需要分层控制（如先看布局类，再看颜色类），目前没有插件能原生做到，得靠人工组织类名顺序或改用 @apply 抽离到 CSS 文件中。
