dataprismcore3.sbs

of

Written by

pw

in

py-1 [&>p]:inline

What this does

This is a Tailwind CSS utility pattern combining spacing and an arbitrary selector:

  • py-1 — sets vertical padding (padding-top and padding-bottom) to 0.25rem.
  • [&>p]:inline — an arbitrary variant using the selector & > p to target direct child

    elements and apply display: inline to them.

Combined on an element, it gives the container small vertical padding and forces any direct

children to render inline instead of block.

When to use it

Use this pattern when you need a compact container with paragraph children that should flow inline (for example, inline labels, compact list items, or text fragments that should not break into separate blocks) while still preserving vertical spacing around the container.

Example HTML

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

Rendered result: the container will have 0.25rem vertical padding and the three

elements will appear inline, producing “First fragment, second fragment, third fragment.”

Why this matters

  • Keeps semantic

    elements while changing their layout without extra markup or custom CSS.

  • Leverages Tailwind’s arbitrary variants for precise, selector-based styling.
  • Avoids editing global styles; scope is limited to the element using the class.

Notes & caveats

  • Arbitrary variants require a Tailwind build configuration that allows them (Tailwind v3+ supports this by default but check your project’s config).
  • The selector &>p only targets direct children. Nested

    elements inside other wrappers won’t be affected.

  • if paragraphs are truly inline fragments.

Comments

Leave a Reply

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

More posts