tailwind 不支持隐式继承，需用 @layer components + @apply 显式定义父子关系，规则须置于 @tailwind base 后、utilities 前，选择器须完整（如 .card .card-title），避免嵌套过深；group/group-hover 适用于直系子元素响应式联动；批量样式应基于结构一致性和语义化类名约定。
用 @apply 在父选择器内批量作用于子元素
不能直接在 HTML 里给父元素加一个类，就让所有 .child 自动获得 text-sm font-medium —— Tailwind 不提供这种隐式继承。但你可以在 CSS 中用 @layer components 配合 @apply 显式定义父子关系：
- 必须把规则写在
@tailwind base之后、@tailwind utilities之前，否则@apply无法识别工具类 - 选择器要写完整，比如
.card .card-title，不能只写.card-title，否则会污染全局 - 避免嵌套过深：Tailwind 默认不生成
.card .header .title这类三级选择器的工具类，@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;
}
}
为什么不用 children 伪类或 > *？
Tailwind 的工具类本身不生成子选择器（如 .parent > .child），所以即使你在配置里启用了 childVariant，sm:>*:flex 这类写法也不会生效。社区插件如 tailwindcss-child-variants 能支持，但代价是：
- 构建体积增加，每个工具类都额外生成一套
> *版本 - 调试困难：
md:>*:gap-2编译后实际是.parent .child还是.parent > .child？容易误判 - 和 PurgeCSS 冲突：若子元素类名没在模板中显式出现，可能被误删
更稳的做法是：用语义化类名明确控制范围，比如统一给子元素加 card-item，再单独定义 .card-item 样式。
用 group + group-hover 类间接影响子元素
当需要响应式联动（比如父容器 hover 时子图标变色），group 是 Tailwind 原生支持的方案：
- 父元素加
group，子元素用group-hover:前缀，例如group-hover:text-blue-600 - 它只对直系子元素生效，不穿透到孙子节点；若需更深，得手动加多层
group - 注意性能：大量使用
group-hover可能触发重排，尤其在列表项中
HTML 示例：
<div class="group p-4 bg-gray-50"> <span class="group-hover:text-indigo-600">Hover me</span> <button class="group-hover:bg-indigo-100">Button</button> </div>
真正“批量”的前提：子元素结构一致且可预测
所谓“批量添加”，本质是承认子元素有共性结构。如果子元素标签、类名、层级都不固定，强行用 CSS 选择器统配只会越来越脆：
- 用
.parent *:not(.ignore)会匹配所有后代，包括文本节点、空<span></span>，样式失控 - 用
.parent > div看似安全，但一旦某处换成<section></section>就失效 - 最省心的方式：约定子元素必须带某个前缀类，比如
card__title、card__content，然后集中定义这些类
这比追求“一次写完全部子元素”更重要：结构清晰了，样式才可持续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
