tailwind-csstailwind-3

How to set one property for multiple children element using tailwind


I have a contenteditable div on my page and i want to every child ul and ol element to have a left padding in it using tailwind

<div class="[&_ol]:pl-4 [&_ul]:pl-4" contenteditable>
  <ol>
    <li>ordered list item</li>
  </ol>

  <ul>
    <li>ordered list item</li>
  </ul>
</div>

is it possible to unite selectors so i don't have to changed padding for every element in the future? something like class="[&_ol,&_ul]:pl-4"?


Solution

  • Multiple selectors in arbitrary variants is explicitly not supported but you could consider working around this restriction by using the :is() pseudo-class:

    <script src="https://cdn.tailwindcss.com"></script>
    
    <div class="[&_:is(ol,ul)]:pl-4" contenteditable>
      <ol>
        <li>ordered list item</li>
      </ol>
    
      <ul>
        <li>ordered list item</li>
      </ul>
    </div>