vscode原生不支持tailwind类名折叠，必须用插件；tailwind-fold（bradlc开发）是唯一稳定轻量方案，专用于class属性静态字符串折叠，默认阈值5，需手动启用、重载窗口，且仅支持class="..."形式，不支持classname或动态绑定。
VSCode 原生不支持折叠 class 或 className 里的 Tailwind 类名，必须靠插件实现；目前稳定、轻量、专一的方案只有 tailwind-fold（bradlc 开发），Inline Fold 虽可用但配置更复杂、容易误匹配。
tailwind-fold 插件启用后仍不折叠？检查这三步
装完插件默认是关闭状态，很多人卡在这一步：
- 打开 VSCode 设置（
Cmd+,或Ctrl+,），搜索tailwind-fold - 必须勾选
tailwind-fold: Enabled—— 这是总开关，不勾等于没装 - 修改
tailwind-fold: Threshold（默认为5），设成4就能在第 5 个类时触发折叠 - 改完设置后执行
Developer: Reload Window（Cmd+Shift+P输入），否则不生效
为什么 class="flex p-4 bg-gray-100" 折叠了，但 className={"flex p-4"} 没反应
tailwind-fold 只处理静态字符串值，且严格匹配属性名为 class：
- ✅ 支持：
class="flex items-center p-4"（HTML / JSX / Vue / Svelte 模板中） - ❌ 不支持：
className="flex items-center"（React 中常见，插件只认class） - ❌ 不支持：
:class="xxx"（Vue 动态绑定）、class={cls}（JSX 表达式）、含换行或转义的字符串 - ❌ 不支持 Pug、Astro 的
class:list、Svelte 的class:active等语法变体
Inline Fold 能处理 className 吗？怎么配才不踩坑
可以，但它靠正则匹配，配置稍不慎就会误折叠或完全失效：
- 在
settings.json中添加语言绑定："inlineFold.languages": [{"language": "html", "attribute": "class"}, {"language": "javascriptreact", "attribute": "className"}] - 避免用太宽泛的正则，比如
"inlineFold.regex": "(class|className)=.*"会把整个 JSX 标签吞掉；推荐用官方示例："inlineFold.regex": "(class|className)=[`'{\"]([^`'\"}]{30,})[`'\"}]+" - 加
"inlineFold.rules"限定只对含bg-、text-、p-的值生效，防止把 JSON 字符串或 URL 也折叠了 - 折叠后占位符建议设为
"tw:…"，比默认的…更易识别语义
真正影响体验的不是“能不能折叠”，而是折叠后能否精准悬停查看、点击展开不跳光标、不干扰格式化——tailwind-fold 在这点上更可靠；Inline Fold 灵活但需要你花时间调正则。如果项目里大量用 className，又不想改写法，那只能硬配后者，并避开动态拼接和换行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
