py-1 [&>p]:inline
What it is
This is a Tailwind CSS utility-style grouping that combines spacing and a selector-based declaration to control the display of direct child
elements. Broken down:
- py-1 — applies vertical padding (padding-top and padding-bottom) of 0.25rem to the element.
- [&>p]:inline — uses Tailwind’s arbitrary selector feature to target direct child
elements and set their display to inline.
When to use it
Use this combination when you want an element to have small vertical padding while forcing its immediate paragraph children to render inline (so they flow horizontally instead of creating block line breaks). This is useful for compact inline lists, metadata lines, or sentence-like groups where paragraphs should not create stacked blocks.
Example HTML
html
<div class=“py-1 [&>p]:inline”><p>Author: Jane Doe</p> <p>•</p> <p>March 28, 2026</p></div>Resulting behavior
- The container gets 0.25rem padding on top and bottom.
- Each direct
child renders inline, so the three pieces appear on one line separated by the middle
acting as a separator.
Notes and tips
- The arbitrary selector [&>p]:inline requires Tailwind v3+ with JIT enabled.
- If you need spacing between the inline paragraphs, add a gap using margin on the
elements (e.g.,
) or use a sibling selector like
[&>p+*]:ml-2. - [&:has(p) …] patterns sparingly; prefer semantic inline elements like for non-block content.
Leave a Reply