On gists

Variants - TW3 / TW4

Tailwind CSS

variants Raw #

// TW 3
@layer components {
  .x {
    color: red;
    border: 1px solid red;
  }
}


// TW 4 
@utility x {
  color: red;
  border: 1px solid red;
}



<div class="[&_ul]:x">
  <ul>
    <li>Test</li>
  </ul>
</div>