vscode原生不支持tailwind类名折叠，必须安装并手动启用tailwind-fold插件、设置阈值、重载窗口三步全做对才生效；它仅处理class="..."形式的单行静态字符串，不支持classname或动态值。
VSCode 原生不支持 Tailwind 类名折叠，装完 tailwind-fold 插件默认也不生效——必须手动启用、设阈值、重载窗口三步全做对，否则类名照旧铺满一行。
tailwind-fold 必须手动开启才能用
很多人装完插件就以为“该工作了”，结果 class 属性里写满 15 个类还是原样展开。这不是 bug，是插件设计如此：tailwind-fold: Enabled 默认为 false。
- 打开 VSCode 设置（
Cmd+,或Ctrl+,） - 搜索
tailwind-fold - 勾选
tailwind-fold: Enabled—— 这是总开关，不勾等于没装 - 改完后必须执行
Developer: Reload Window（Cmd+Shift+P输入），否则设置不加载
只认 class="..."，不处理 className 或动态值
tailwind-fold 的匹配逻辑非常严格：它只扫描 HTML/JSX 模板中属性名为 class 且值为单行静态字符串的节点。
- ✅ 支持：
<div class="flex p-4 bg-gray-100 hover:bg-gray-200"> <li>❌ 不支持：<code><div classname="flex p-4">（属性名不是 <code>class） - ❌ 不支持：
<div class='{"flex' :>（值是表达式，非静态字符串） <li>❌ 不支持：<code><div class="flex<br>p-4<br>bg-gray-100">（含换行符，破坏连续匹配） <p>如果你项目大量用 <code>className，别硬调tailwind-fold，它根本不适配；要么统一改回class，要么换Inline Fold并配正则。阈值设太小会误折叠，设太大又没效果
tailwind-fold: Threshold控制“几个类开始折叠”，默认是5，意思是第 6 个类起才触发折叠。这个值不是越大越好，也不是越小越勤快。- 设成
3：像class="p-2 text-sm rounded"这种常用三元组合也会被收起，反而增加悬停成本 - 设成
8：实际开发中超过 8 个类的场景不多，折叠覆盖率大幅下降 - 推荐从
4或5起步，观察一周再微调；改完记得重载窗口
折叠后占位符是
…，语义弱。虽然tailwind-fold不支持自定义 placeholder，但你可以靠悬停快速确认内容——这点比正则类插件更稳。和其它插件冲突时，优先关掉 CSS-in-JS 高亮器
tailwind-fold是纯显示层操作，不修改 AST，但它依赖编辑器对 class 属性的语法解析。某些 CSS-in-JS 扩展（如styled-components或Emotion高亮器）会劫持 JSX 字符串解析流程，导致class属性被识别为普通字符串而非 HTML 属性。- 现象：插件已启用、阈值正确、也重载了，但只有部分文件折叠，另一些完全没反应
- 排查：临时禁用所有 CSS-in-JS 相关扩展，重启 VSCode，看是否恢复
- 若确认是冲突，保留
tailwind-fold，关闭高亮器或换用轻量替代（如vscode-styled-jsx）
真正难调的不是“怎么让它动起来”，而是“为什么它在 A 文件生效，在 B 文件静默”——这时候大概率不是配置错了，是语言服务或扩展链路被截断了。
- 设成
