data-streamdown=

py-1 [&>p]:inline

What it is

This is a Tailwind CSS utility shorthand combining spacing and a child selector.

• py-1 sets vertical padding (padding-top and padding-bottom) to the framework’s 0.25rem spacing.
• [&>p]:inline is a JIT/Arbitrary-Variant syntax that targets direct child

  elements and applies display: inline to them.

When to use it

• When you want consistent vertical padding on a container while forcing its immediate paragraph children to render inline (no block breaks).
• Useful for compact list-like layouts where paragraphs should appear inline but the wrapper needs vertical spacing for alignment.

Example HTML

<div class=“py-1 [&>p]:inline”><p>First inline paragraph.</p>  <p>Second inline paragraph.</p></div>

Resulting CSS (conceptual)

• .py-1 → padding-top: 0.25rem; padding-bottom: 0.25rem;
• .[&>p]:inline → > p { display: inline; }

Notes & caveats

• The arbitrary-variant syntax requires Tailwind JIT (v3+) and enabling of arbitrary variants in your build.
• Using display:inline on paragraphs removes block semantics (margins, full-width stacking). Ensure you don’t need block behavior like vertical margins or accessible reading flow.
• If you need spacing between inline paragraphs, add margin or use gap utilities on an inline-flex container instead.

Alternatives

• Use flex or inline-flex on the parent: class=“py-1 flex gap-2”
• Use a more specific selector in your CSS if you prefer not to rely on arbitrary variants.