py-1 [&>p]:inline
What it is
The class combination py-1 [&>p]:inline is a Tailwind CSS utility pattern that applies vertical padding and a nested-child selector to style direct paragraph children. It uses Tailwind’s arbitrary variants (the square-bracket syntax) to target child elements with a selector and combine that with a spacing utility.
Breakdown
- py-1 — sets padding-top and padding-bottom to Tailwind’s spacing value
1(usually 0.25rem). - [&>p]:inline — an arbitrary variant that compiles to a nested selector targeting direct
pchildren (> p) and applies theinlinedisplay utility to them.
In effect, the container gets small vertical padding, and every direct
child inside that container is rendered as inline elements instead of block-level paragraphs.
When to use it
- When you want compact vertical spacing around a container but need paragraph tags inside to behave inline (for example, to keep inline spacing, wrap text flows, or allow multiple
- When working with markup you can’t easily change (e.g., a CMS that outputs
Example HTML
html
<div class=“py-1 [&>p]:inline”><p>First paragraph.</p> <p>Second paragraph.</p> <p>Third paragraph.</p></div>Rendered result: the container has small vertical padding and the three paragraphs sit inline next to each other (subject to available width), behaving like spans rather than stacking as blocks.
Notes & caveats
- Inline paragraphs won’t respect top/bottom margins the same way block paragraphs do; use horizontal spacing utilities (like
mr-2) on thepelements if you need gaps. - If you need them to wrap like normal text, inline is suitable; if you want block behavior on small screens, consider responsive variants (e.g.,
sm:[&>p]:block). - Arbitrary variants require a Tailwind version that supports them and may need proper escaping in some build setups or frameworks.
Variations
- Make direct paragraphs inline and add spacing:
py-1 [&>p]:inline [&>p]:mr-2 - Inline on small screens, block on larger:
sm:[&>p]:inline lg:[&>p]:block - py-1 [&_p]:inline
Leave a Reply