dataprismcore1.sbs

How

Written by

pw

in

py-1 [&>p]:inline — What it does and when to use it

This utility-class combo is Tailwind CSS style syntax (using arbitrary variants and selectors). It applies a vertical padding of 0.25rem (py-1) to the element, and additionally sets any direct child

elements to display inline (the arbitrary selector [&>p]:inline). Use it when you want a container with small vertical padding but need its immediate paragraph children to flow inline rather than as block-level paragraphs.

Behavior

  • py-1: adds padding-top and padding-bottom of 0.25rem.
  • [&>p]:inline: compiles to a CSS rule targeting direct descendant p elements, e.g. .your-class > p { display: inline; } — so paragraphs inside the container no longer force line breaks.

Example HTML

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

Rendered result: the three

elements appear inline (separated only by their content and any whitespace), and the container keeps 0.25rem vertical padding.

When to prefer this pattern

  • You have semantic paragraphs but want them visually inline (e.g., inline author/date badges, short labels).
  • You prefer to keep

    for semantics while overriding its default block behavior locally.

  • You want a compact container with slight vertical spacing.

Caveats and tips

  • Inline elements do not accept vertical margin the same way blocks do. Use horizontal spacing (mr-2 / space-x-) or add display:inline-block if you need block-like vertical behavior.
  • Specificity: the arbitrary selector targets direct children only. Use [&p]:inline for any descendant p, or [&>p]:inline-block if you need margins to apply.
  • Ensure your Tailwind config allows arbitrary variants (Tailwind 3+ supports them by default).

Quick variants

    &]:pl-6” data-streamdown=“unordered-list”>

  • Use py-2 [&>p]:inline-block to get inline-block paragraphs that respect vertical sizing.
  • py-1 [&_p]:inline to affect nested paragraphs, not just direct children.

Your email address will not be published. Required fields are marked *

More posts