Tailwind不支持子选择器语法，需用@layer components+@apply显式定义父子关系样式，或用group/group-hover实现直系子元素联动，任意值语法可临时穿透后代但有限制。
子选择器在 Tailwind 中不直接存在
Tailwind 的工具类（如 bg-blue-500、text-sm）默认只生成单层选择器，比如 .bg-blue-500，不会自动输出 .parent > .child 或 .parent .child 这类嵌套规则。你写 child:bg-blue-500 或 children:text-gray-500 是无效的——Tailwind 官方不支持 children:、child: 这类变体。
常见错误现象：
-
md:>*:flex编译后无效果，因为>*不是 Tailwind 原生支持的语法 - 在 HTML 里给父元素加
card类，期望所有.card > p自动获得text-base，结果没生效 - 用社区插件（如
tailwindcss-child-variants）后样式错乱，或 PurgeCSS 把本该保留的子类删掉了
@layer components + @apply 是最稳的批量子样式方案
想让 .card 下的 .card-title 和 .card-body 固定继承某些样式，必须显式声明父子关系，且顺序和选择器写法有硬性要求：
- 规则必须放在
@tailwind base之后、@tailwind utilities之前，否则@apply找不到工具类定义 - 选择器要写完整，例如
.card .card-title，不能简写成.card-title（会污染全局） - 避免三级及以上嵌套，如
.card .header .title—— Tailwind 默认不生成这种组合，@apply也无法跨层复用
@layer components {
.card {
@apply p-4 bg-white rounded-lg shadow-sm;
}
.card .card-title {
@apply text-lg font-semibold text-gray-800;
}
.card .card-body {
@apply text-gray-600 leading-relaxed;
}
}
group / group-hover 适合直系子元素联动
当需要“父容器状态变化 → 子元素响应”，比如 hover 卡片时图标变色，group 是 Tailwind 原生支持、零配置的方案：
立即学习“前端免费学习笔记（深入）”；
- 父元素加
group，子元素用group-hover:xxx，例如group-hover:text-blue-600 - 它只对直系子元素（
>）生效，不穿透到孙子节点；若需更深控制，得手动在中间层也加group - 性能敏感场景（如长列表）慎用大量
group-hover，可能触发重排
HTML 示例：<div class="group p-4 bg-gray-50">Hover me<button class="group-hover:bg-indigo-100">Button</button>
</div>
任意值语法 + 选择器语法可临时穿透后代
如果只是偶尔需要精确控制某个第三方组件内部结构（比如 react-json-view 的字符串值换行），可以用 Tailwind 的任意值语法配合选择器语法：
-
[&_.react-json-view_span.string-value]:break-all中的&_表示“当前元素及其后代”，.和span是标准 CSS 类/标签选择器 - 这种写法本质是生成一条带作用域的 CSS 规则，不是动态匹配，所以不依赖 DOM 结构是否“干净”
- 缺点：无法使用响应式前缀（如
md:[&_.item]:p-2不生效），也不能链式叠加多个工具类（[&_.x]:p-2 m-1会报错）
典型用例：<div class="[&_.react-json-view_span.string-value]:break-all">...</div>
真正难的不是写法，而是判断什么时候该用 @layer、什么时候该改 HTML 结构。比如遇到 first: 失效，大概率是父容器里混了注释或空文本节点——这时候修 DOM 比硬套选择器更可靠。
