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?
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]
.