Search code examples
csstailwind-css

How do I style child elements in Tailwind CSS?

Suppose I have a parent div element, and I want to style its child elements using Tailwind CSS. How can I apply specific styles to the child elements?

Solution

  • You can use arbitrary variants and use & to reference the current element. In this way, you can select child elements as if you were writing normal CSS selectors:

    <script src="https://cdn.tailwindcss.com"></script>

<div id="parent" class="[&>div]:bg-amber-200 odd:[&>div]:bg-red-200">
  <div>child 1</div>
  <div>child 2</div>
  <div>child 3</div>
</div>

    Note that if the selector contains spaces, you need to use _ instead: [&_div].