How to wire a class that impacts only sub-child of the first child in TailwindCSS?

user_5513282 0
Viewed 772

I'm using React (Next.js) and TailwindCSS.

<ul>
  <li>
    <h1 className="bg-red-400">first</h1>
  </li>
  <li>
    <h1 className="bg-green-400">second</h1>
  </li>
  <li>
    <h1 className="bg-green-400">third</h1>
  </li>
  <li>
    <h1 className="bg-green-400">four</h1>
  </li>
</ul>

I want to write TailwindCSS class that only change sub child background color of first child of <ul> like

ul > li::first-child > h1
tailwind-css next.js reactjs css
1 Answers

You can't target the h1 with a default tailwind CSS class, but the first li can be targeted with pseudo-class references.

<ul className="first:bg-red-400 first:text-black">

Tailwind recommends not doing this if possible, but you can also add your class that reuses tailwind's styles

@layer components {
 ul > li::first-child > h1 {
  @apply bg-red-400 text-black;
 }
}
user_153048140
Related