直接写.card .header h2等嵌套选择器会失效，因Tailwind JIT引擎只扫描HTML/JS中出现的工具类名，不识别自定义CSS规则，导致响应式前缀、@apply和优化全部失效。
不能靠写 .card .header h2 这类嵌套选择器来处理复杂嵌套样式——Tailwind 的构建流程根本不会扫描它，响应式前缀、@apply、JIT 优化全失效。
为什么直接写嵌套选择器会失效
你手写的 .modal .overlay 或 .dropdown-menu .item:hover 是普通 CSS 规则，不在 Tailwind 的 content 扫描路径里。JIT 引擎只提取 HTML 和 JS 中出现的工具类名，对这类自定义规则视而不见。
- 加了
md:text-2xl却没生效？因为md:前缀只对工具类有效，不作用于你手写的嵌套选择器 - 热更新后样式消失？PostCSS 没在该文件上下文中触发 Tailwind 的解析逻辑
- 和第三方组件库冲突时只能硬加
!important，后续改一个颜色就得全局搜
@layer components 是唯一可控的封装方式
所有想复用、带语义、能响应式的嵌套组合，必须用 @layer components 显式声明，并确保它出现在 @tailwind base 之后、@tailwind utilities 之前。
- 命名建议加前缀（如
.btn-primary），避免未来和工具类或第三方类名冲突 - 伪类必须用变体语法：
hover:bg-blue-600，不能写&:hover { @apply bg-blue-600 } -
@apply只拼接已有工具类，不支持条件、变量或运行时逻辑，复杂状态组合仍推荐写在 JSX 中
示例：
立即学习“前端免费学习笔记（深入）”；
@layer components {
.card-header {
@apply px-6 py-4 border-b border-gray-200 font-semibold text-gray-800;
}
.dropdown-trigger {
@apply relative inline-block;
}
.dropdown-menu {
@apply absolute z-50 mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5;
}
}
group-hover 要求 DOM 结构严格匹配
group 不是修饰符，必须作为独立 class 加在共同祖先容器上；group-hover 只向下影响后代，不能跨兄弟、不能向上、不能靠视觉位置“猜”关系。
- 错误写法：
<div class="hover:group">——hover:group根本不存在 - 正确结构：外层容器加
class="group"，内部元素用group-hover:xxx，且它们必须是 DOM 后代关系 - 绝对定位子元素若遮挡 hover 区域，需手动加
pointer-events: auto - 响应式下不能写
md:group-hover:scale-110，必须拆成md:scale-100 md:group-hover:scale-110
嵌套语法支持需显式启用且有边界
Tailwind v3 默认不支持 & 嵌套，v4 Oxide 引擎虽原生支持，但实际项目中仍需确认构建链是否就绪。
- v3 必须在
postcss.config.js中添加'tailwindcss/nesting': {}，且必须放在tailwindcss: {}之前 - 不支持
&::before、@media内部嵌套、跨@layer引用 - Vue 单文件组件中
<style scoped>+ 嵌套易出错，建议优先用非 scoped 或移至全局 CSS - 编译后务必在浏览器开发者工具中验证生成的选择器是否带 scope id、是否命中目标元素
真正容易被忽略的不是“怎么写嵌套”，而是“谁在解析它”——PostCSS 插件顺序、JIT 扫描路径、Vue 作用域处理、浏览器最终渲染的 CSS 规则，四者缺一不可。任何一环断开，样式就只是写在文件里，却从不生效。
