py-1 [&>p]:inline
What this selector means
py-1 is a utility class (commonly from Tailwind CSS) that applies vertical padding (padding-top and padding-bottom) of 0.25rem (if using Tailwind’s default scale).
[&>p]:inline is an arbitrary variant selector that targets direct child
elements and applies the display: inline style to them.
Together, py-1 [&>p]:inline on an element means:
- The element gets small vertical padding (py-1).
- Any direct child
elements are forced to display inline instead of the default block behavior.
Why and when to use it
- To keep semantic
tags (useful for accessibility or content tooling) but render them inline so they flow with surrounding text rather than starting a new line.
- To apply consistent vertical spacing on a container while ensuring its paragraphs don’t create block-level breaks.
- Useful in compact UI elements (badges, inline disclaimers, or mixed inline text with semantic paragraphs).
Example HTML
<div class=“py-1 [&>p]:inline”><p>This is inline paragraph text,</p> <p>so it flows in a single line like regular spans.</p></div>Rendered result: the container has small vertical padding, and both
elements display inline, so their contents appear on the same line (wrapping as needed) rather than as separate block paragraphs.
Notes and caveats
- Browser behavior: Converting
to inline removes block formatting; margins and some text-flow behaviors differ from block-level paragraphs.
- Accessibility/semantics: Keeping
for semantic structure is fine, but if the content is purely inline by nature, consider using or instead.
- Tailwind configuration: Arbitrary variants like
[&>p]:inlinerequire a Tailwind version that supports JIT and the arbitrary variant syntax; ensure your build pipeline allows it. - Alternative CSS: The same effect can be achieved without Tailwind:
.container { padding-top: .25rem; padding-bottom: .25rem; }.container > p { display: inline; }When not to use
- When paragraphs must remain block-level for readability or layout (long-form content).
Leave a Reply