Sublime Text 无法自动提取 Tailwind 嵌套组件样式，因其不解析 DOM 结构、不追踪 class 层级关系，仅依赖静态字符串匹配；所有组件提取必须人工识别 HTML 中重复 class 组合，再手动在 @layer components 中用 @apply 封装。
Sublime Text 本身不支持 Tailwind 的嵌套层级样式提取，所谓“快速提取组件”必须靠人工识别 + @apply 封装，不能依赖编辑器自动推导父子关系或生成 CSS 类。Tailwind 的原子化机制和 JIT 编译逻辑决定了：它不会、也不能从 HTML 结构中反向推导出可复用的嵌套组件类。
为什么 Sublime 无法自动提取嵌套组件样式
Tailwind 的构建流程只扫描 content 配置中指定的文件路径里的类名字符串（如 text-lg、md:flex），它不解析 DOM 结构、不追踪 class 属性的嵌套位置、也不分析父子元素间的语义关系。Sublime 即使装了 lsp-tailwindcss，语言服务器也只提供类名补全，不分析 HTML 树结构。
- 你写
<div class="card"><h2 class="card-title">...，Sublime 不会提示“检测到 card 组件，是否提取为 @layer components？” -
tailwindcss-language-server不读取 HTML 文件中的 class 层级，只做静态字符串匹配 - 所有“组件提取”动作都发生在开发者脑内：看到重复组合 → 手动建
@layer components→ 写.card { @apply ... }
在 Sublime 中真正可行的组件提取流程
不是让编辑器帮你“发现组件”，而是用 Sublime 的快捷操作辅助你完成标准 Tailwind 提取动作。关键在于把 @apply 和 @layer 落地得快、不出错。
- 确保
tailwind.config.js已存在且被lsp-tailwindcss正确加载（检查 LSP 设置里"settings": { "tailwindCSS": { "configPath": "./tailwind.config.js" } }） - 在
src/styles.css里手动添加@layer components { }块（必须放在@tailwind utilities之后） - 复制 HTML 中高频出现的 class 组合，粘贴进
@layer components块内，用@apply转换，例如：.card { @apply max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl; } - 避免在
@layer components里写嵌套选择器（如.card .header），Tailwind 不扫描它们，JIT 不生效，响应式前缀（md:）也不会注入
容易被忽略的模块化陷阱
很多人以为把 class 提取成 .card 就完成了模块化，但实际落地时卡在三个地方：
立即学习“前端免费学习笔记（深入）”；
-
@layer components声明顺序错：如果写在@tailwind utilities之前，整个块会被压制，.card样式无效 - 在
@layer components里用了未定义的 theme 值，比如@apply p-[1.875rem]，而tailwind.config.js的theme.spacing没配"1.875rem"，编译直接报错Invalid utility - 用 Sublime 的 Emmet 输入
div.card会自动展开成<div class="card">，但如果你还没在 CSS 里定义.card，这个 class 就是纯字符串，不触发任何样式——没有 JIT 扫描，就没有生成对应 CSS 规则
真正能跑起来的模块化，靠的是你在 Sublime 里手动维护的 @layer components 块 + 项目根目录下有效的 tailwind.config.js + 构建流程中正确引入该 CSS 文件。编辑器只是文本操作工具，不参与样式逻辑推导。
