dataprismcore5.sbs

Faster

Written by

pw

in

py-1 [&>p]:inline

What this utility class does

py-1 [&>p]:inline is a Tailwind CSS utility combination that applies small vertical padding to an element while forcing its direct child paragraphs to render inline. It’s shorthand for two concerns in one class string:

  • py-1 — applies padding-top and padding-bottom of 0.25rem (4px) by default.
  • [&>p]:inline — a JIT (just-in-time) style selector that targets direct child

    elements and sets their display to inline.

When to use it

Use this pattern when you need compact vertical spacing on a container but want its immediate paragraph children to flow inline with surrounding content instead of creating block-level breaks. Common scenarios:

  • Compact list-like rows where paragraphs should not stack vertically.
  • Inline labeling inside a padded container.
  • Small UI elements (badges, metadata rows) where paragraphs are used for semantic grouping but should behave like inline text.

Example HTML

html
<div class=“py-1 [&>p]:inline”><p>Author:</p>  <p>Jane Smith</p></div>

Rendered behavior: the container gets 0.25rem vertical padding; the two

elements appear inline as if they were spans, producing “Author: Jane Smith” on a single line.

Accessibility note

Using semantic

for text is fine, but if content is purely inline text or labels, consider using or instead. If you keep

, ensure screen readers and document structure still make sense.

Variations

  • Change padding: py-2 [&>p]:inline for larger vertical spacing.
  • Target nested paragraphs: [&p]:inline sets inline for any descendant

    .

  • Combine with other utilities: py-1 [&>p]:inline gap-2 flex if you want inline children with spacing inside a flex container.

Browser support and build notes

This relies on Tailwind JIT arbitrary variants (the [&>p] syntax). Ensure your Tailwind config uses a version that supports arbitrary variants (v3+). The generated CSS uses a selector targeting direct child paragraphs; it works in modern browsers that support standard CSS selectors.

Quick checklist

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

  • Tailwind JIT v3+ enabled ✔
  • Use when paragraphs should be inline ✔

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

More posts