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

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
cssreactjsnext.jstailwind-css


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ed Lucas

Related Questions