How to select a specific child by className in Tailwind

Babu 0
Viewed 24

How to select a specific child by className in Tailwind?

I have tried some selectors but it seems nothing is matching, is it even possible?

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

note: I can't style directly child component with CHILD_CLASSNAME

tailwind-css
1 Answers

Arbitrary variants should contain & sign - it points on current element with this variant class

<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 simply will point on every element within as in regular CSS. You can use any CSS selector

Please note: if your class contains _ in the class name, it should be escaped with \ - otherwise Tailwind will consider it as a space

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

DEMO

Ihar Aliakseyenka0
Related