如何在 Tailwind 中按类名选择特定子项

Question

如何在 Tailwind 中通过 className 选择特定的子项？

我尝试了一些选择器，但似乎没有任何匹配，这可能吗？

<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>

注意：我无法使用 CHILD_CLASSNAME 直接设置子组件的样式

Answer 1

任意变体应包含&符号 - 它指向具有此变体类的当前元素

<div class="[&_.CHILD-CLASSNAME]:bg-red-500 [&_.NESTED-CHILD-CLASSNAME]:bg-blue-500">
   <div class="CHILD-CLASSNAME">
      text in red
      <div class="NESTED-CHILD-CLASSNAME">text in blue</div>
   </div>
<div>

&_.CHILD-CLASSNAME就像常规 CSS 中一样简单地指向每个元素。您可以使用任何 CSS 选择器

请注意：如果您的类包含_类名，则应使用\- 进行转义，否则 Tailwind 会将其视为空格

<div class="[&_.CHILD_CLASSNAME]:bg-red-500 [&_.NESTED-CHILD-CLASSNAME]:bg-blue-500">
   <div class="CHILD_CLASSNAME">
      text in red (not working because of "_")
      <div class="NESTED-CHILD-CLASSNAME">text in blue</div>
   </div>
<div>

<div class="[&_.CHILD\_CLASSNAME]:bg-red-500 [&_.NESTED-CHILD-CLASSNAME]:bg-blue-500">
   <div class="CHILD_CLASSNAME">
      text in red
      <div class="NESTED-CHILD-CLASSNAME">text in blue</div>
   </div>
<div>

演示版