Access child elements in TailwindCSS
Question:
How to access child elements in TailwindCSS? Answer:
<div class="p-10 [&>div]:pb-3">
Description:
If you want to access the direct children of an HTML element in TailwindCSS, you can easily do so using the arbitrary variants feature since version 3.1.
For example if you want to add extra padding
to the bottom of each direct child div
elements you can write this:
<div class="[&>div]:pb-3">
<div>
<div>A-1</div>
<div>A-2</div>
<div>A-3</div>
</div>
<div>
<div>B-1</div>
<div>B-2</div>
<div>B-3</div>
</div>
<div>
<div>C-1</div>
<div>C-2</div>
<div>C-3</div>
</div>
</div>
And this will result an output:
Important: The space character is not allowed in the expression! Either you must write everything completely in one word, or use the underscore _
character instead of the space character.
Examples:
<div class="[& > div]:pb-3">
INVALID<div class="[&>div]:pb-3">
VALID<div class="[&_>_div]:pb-3">
VALID
Reference:
Tailwind arbitrary variants reference
Share "How to access child elements in TailwindCSS?"
Related snippets:
- Create blinking background with TailwindCSS
- Create a neon effect with TailwindCSS
- Rotate element with TailwindCSS
- Change SVG icon color with TailwindCSS
- Using :not in TailwindCSS
- Specify exact width value in TailwindCSS
- Set element width over 100% using Tailwind CSS
- Stretch children to fill horizontally
- Create a fixed navbar with TailwindCSS
- Use font from local files in TailwindCSS
- Make an element invisible in mobile size in Tailwind CSS
- Create a 20/80 grid with Tailwind CSS
- Select the nth child in TailwindCSS
- Add class to child when hovering on parent in TailwindCSS
- Fill the full height of the screen in TailwindCSS
- Create transition with TailwindCSS
- Create horizontal rule with text using TailwindCSS
- Set background image with TailwindCSS
- How to use CSS variables in TailwindCSS
- Center an absolute element in TailwindCSS
- Remove arrows from number input in TailwindCSS
- How to use !important in TailwindCSS
- Access child elements in TailwindCSS
- Select first child in TailwindCSS
- Create semi transparent background in TailwindCSS
- How to use calc() in TailwindCSS
- Add text shadow with Tailwind CSS
Tags:
access, select children, direct, parent, element, tailwind, tailwindcss Technical term:
Access child elements in TailwindCSS