You’re referencing a CSS selector and utility: py-1 and [&>p]:inline. Here’s a concise explanation and how they work together.
- py-1
- Utility class (commonly from Tailwind CSS).
- Applies vertical padding:
padding-topandpadding-bottomequal to the spacing scale value1(usually 0.25rem / 4px by default).
- [&>p]:inline
- Tailwind’s arbitrary variant syntax targeting direct child
elements. - Means “for any direct child
pof this element, apply theinlinedisplay”. - Equivalent CSS:
css
.your-element > p { display: inline; }
- Tailwind’s arbitrary variant syntax targeting direct child
Example combining both (Tailwind HTML):
html
<div class=“py-1 [&>p]:inline”><p>This paragraph will be inline.</p> <span>Normal span.</span></div>
Effect: the container gets small vertical padding; its direct
children render inline instead of block.
Leave a Reply