py-1 [&>p]:inline

Article: py-1 [&>p]:inline

What it is

The class expression py-1 [&>p]:inline combines a utility for vertical padding with a Tailwind CSS arbitrary selector that targets direct child

elements and makes them display inline.

Breakdown

• py-1 — applies vertical padding of 0.25rem (top and bottom).
• [&>p]:inline — an arbitrary variant that selects direct child

  elements (using the CSS selector > p) and sets their display to inline.

When to use it

Use this combination when you need a container with small vertical padding but want its immediate paragraph children to flow inline (e.g., inline paragraphs inside a compact control, label group, or button-like element).

Example HTML

<div class=“py-1 [&>p]:inline”><p>First part,</p>  <p>second part.</p></div>

Rendered result: the container keeps small vertical spacing while the two paragraphs render side-by-side as inline content.

Notes and caveats

• The arbitrary selector syntax ([&>p]:…) requires Tailwind v3.2+ with JIT-enabled features.
• Inline display removes block-level spacing and prevents paragraph-specific vertical margins from stacking; adjust margins manually if needed.
• For broader descendant selection use [& p]:inline; for only specific elements consider adding a utility class to those elements instead.

Alternatives

• Use elements instead of

  if inline semantics are intended.

• ) for clearer intent.