py-1 [&>p]:inline
What it is
The snippet “py-1 [&>p]:inline” is a utility-style class expression used with Tailwind CSS (or Tailwind-like utility frameworks) and modern CSS selector syntax that targets direct child
elements and applies inline display while adding vertical padding to the parent.
Breakdown
- py-1 — a utility that applies small vertical padding (padding-top and padding-bottom) to the element. In Tailwind CSS, “py-1” equals padding: 0.25rem 0.
- [&>p]:inline — a variant using Tailwind’s arbitrary selector feature that compiles to a CSS rule targeting direct child p elements and sets them to display: inline. The [&>p] portion means “for any direct child p” and the :inline is the utility to apply.
Together, applied to a container element, this expression:
- Gives the container 0.25rem vertical padding.
- Forces any direct
child to render inline instead of the default block behavior.
When to use it
- You want paragraph elements inside a container to flow inline (for example, to keep multiple short paragraphs on the same line) without changing all paragraphs globally.
- You need a compact vertical spacing around the container while preventing
elements from creating line breaks.
Example
HTML:
First
Second
Third
Result: The three paragraphs render side by side as inline elements, with the container having small top and bottom padding.
Caveats
- Using inline paragraphs can affect accessibility and semantics; ensure inline paragraphs are appropriate for your content.
- Browser compatibility depends on the CSS generated; Tailwind’s arbitrary selector support requires a recent version.
- If paragraphs contain block-level children or long text, inline display may produce layout issues; consider using span or adjusting markup if needed.
Leave a Reply