如何在Tailwind CSS中通过className选择特定子元素？

你现在的问题出在Tailwind选择器的语法理解上：你写的[CHILD_CLASSNAME]:bg-red是把CHILD_CLASSNAME当作HTML属性来匹配（比如<div CHILD_CLASSNAME>...</div>这种元素），但你的子元素是用className="CHILD_CLASSNAME"设置的类名，自然匹配不上。

正确的写法是用Tailwind的嵌套选择器语法，通过&指代当前父元素，再结合子元素的类选择器，代码如下：

<div className="[&_.CHILD_CLASSNAME]:bg-red [&_.NESTED_CHILD_CLASSNAME]:bg-blue">
   <div className="CHILD_CLASSNAME">
      text in red
      <div className="NESTED_CHILD_CLASSNAME">text in blue</div>
   </div>
</div>

这段代码会生成对应的CSS规则，精准匹配父元素下带有指定类名的子元素，实现你要的样式效果。

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