Tailwind中使用嵌套选择器为子元素设置样式无效问题咨询

首先看你的HTML结构：

<div class="">
    <p>First text</p>
    <p>
        <span>Hi</span>
        <span class="bold">Bye</span>
    </p>
</div>

当你给父div加text-red-400时，所有子元素变红是因为文字颜色是可继承样式，父元素的color属性会被子元素继承。但使用[&>.bold]:text-red-400时样式不生效，核心原因主要有两个：

1. 未启用Tailwind的JIT编译模式 #

Tailwind v3版本默认启用JIT（即时编译），但v2及更早版本默认是静态编译模式——只会编译预定义的固定类，不会处理[&>.bold]这种动态生成的嵌套选择器。如果没开JIT，Tailwind根本不会生成.your-div-class > .bold { color: #f87171; }这条CSS规则，自然无法生效。

2. 选择器写法的解析问题 #

虽然[&>.bold]:text-red-400在JIT模式下属于合法语法，但有时候会因为缺少空格导致解析异常。正确的写法应该是[& > .bold]:text-red-400（给&、>、.bold之间添加空格），这样Tailwind能更准确识别选择器的层级结构。

解决办法 #

• 确保开启JIT模式：v2版本需在tailwind.config.js中添加mode: 'jit'；v3版本默认已开启，无需额外配置。
• 修正选择器写法：给父div添加[& > .bold]:text-red-400类，若父div有自定义类，也可写成[&.parent-class > .bold]:text-red-400。
• 也可以用CSS嵌套+@apply的方式实现：

.parent {
  @apply & > .bold:text-red-400;
}

之后给父div添加parent类即可。

内容的提问来源于stack exchange，提问作者Ali Radan