VS Code原生不折叠class属性，因将其视为普通字符串；需用插件实现：tailwind-fold专用于class="..."静态类名折叠，配置极简；Inline Fold通用但需手动配正则，支持className。
Tailwind CSS 本身不导致 HTML 源码阅读困难，真正让 class 属性难以扫读的，是你在模板里堆砌了大量静态工具类，且缺乏视觉分层或结构压缩——这不是框架缺陷，而是编辑器默认不处理长属性字符串的结果。
VS Code 为什么默认不折叠 class 属性
VS Code 原生只按语法高亮和缩进做渲染，class 是普通 HTML 属性值，它不区分“这是 Tailwind 类名”还是“这是 data-id 字符串”。只要内容是合法字符串，就全量展开显示。没有插件介入时，哪怕只有 3 个类，也会挤满整行；20 个类则必然触发水平滚动条，破坏代码上下文连贯性。
- 折叠功能必须由插件主动识别
class属性 + 匹配 Tailwind 类名模式（如flex、bg-blue-500、hover:underline）才能触发 - 插件不会修改源码，只改变编辑器渲染层：折叠后鼠标悬停仍可预览完整类名，点击箭头可临时展开
- 若属性写成
className="..."（React）、:class="..."（Vue）或含换行/拼接（如class={"a " + b}），绝大多数插件直接跳过——它们只认标准的class="..."单行静态字符串
tailwind-fold 和 Inline Fold 到底该选哪个
二者定位不同，不能混用，选错会导致折叠失效或行为冲突：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
tailwind-fold专为 Tailwind 设计，规则硬编码：只作用于class="..."，自动识别并按空格切分类名，阈值默认 5，支持悬停预览和点击展开，配置极简，推荐首选 -
Inline Fold是通用折叠工具，需手动配置匹配规则（如正则tw:.*），能适配className（需额外加javascriptreact/className绑定），但对类名语义无感知，容易误折非 Tailwind 字符串 - 如果项目用 JSX，且坚持用
className，Inline Fold是唯一可行选项；否则一律用tailwind-fold，它更轻、更稳、零配置即用
折叠后仍要警惕的三个盲区
折叠只是视觉优化，不是问题根治。以下情况插件完全无能为力，必须靠工程手段干预：
立即学习“前端免费学习笔记（深入）”；
- 动态类名：如
class={`${base} ${isActive ? 'bg-blue-500' : 'bg-gray-200'}`—— 插件无法解析变量，JIT 编译器也看不到真实类名，必须加safelist或改用style - 响应式/状态修饰符混写：如
md:p-6 hover:bg-gray-100 focus:ring-2折叠后全变成tw:…，你无法一眼判断哪段生效于什么条件，调试时仍得点开确认 - 类名语义断裂：折叠掩盖不了
flex items-center justify-between p-4 rounded-lg bg-gray-50 border border-gray-200这种组合本质是“卡片容器”，但它在 HTML 里没有任何语义锚点——队友 grepcard找不到，设计系统文档也对不上
折叠插件解决的是“看不过来”，不是“看不懂”。一旦你发现自己频繁右键点击展开、反复核对类名是否写错，或者审查 PR 时总要复制粘贴到浏览器 DevTools 才敢确认样式效果，那说明问题已超出视图层，该回到组件抽象或设计令牌层面重审了。
