p]:inline” data-streamdown=”list-item”>Ping Monitor vs. Uptime Monitor: Which One Do You Need?

py-1 [&>p]:inline

This article explains the Tailwind CSS utility class combination py-1 [&>p]:inline: what it does, when to use it, and examples for practical use.

What it means

• py-1 — applies vertical padding of 0.25rem (top and bottom) to the element.
• [&>p]:inline — uses Tailwind’s arbitrary selector feature to target direct child

  elements of the element and apply the inline display utility to them.

Combined, py-1 [&>p]:inline gives the container small vertical padding and forces any immediate

children to render inline instead of block.

When to use it

• You want paragraph tags inside a container to flow inline (e.g., to place text segments that would otherwise be block-level on the same line) while keeping compact vertical spacing on the container.
• You prefer to keep semantic

  elements but need them to behave like inline elements for specific layout or typographic reasons.

• Useful in component libraries or utility-first projects where you want styling applied from the parent rather than adding classes to every child.

Examples

1. Basic usage

<div class=“py-1 [&>p]:inline”><p>Part one,</p>  <p>part two,</p>  <p>and part three.</p></div>

Rendered result: the three

elements appear inline with only 0.25rem vertical padding on the container.

2. With spacing between inline paragraphs
   To add horizontal spacing between those inline paragraphs:

<div class=“py-1 [&>p]:inline [&>p+]:ml-2”>  <p>Item A</p>  <p>Item B</p>  <p>Item C</p></div>

Here &>p+ targets any sibling immediately following a

, adding left margin to separate inline items.

3. Combining with typography utilities

<div class=“py-1 text-sm [&>p]:inline [&>p]:text-gray-700”>  <p>Note:</p>  <p>This is inline text styled smaller and gray.</p></div>

Accessibility and semantics

• Keeping

  elements preserves semantic meaning for paragraphs; making them inline is fine for short text runs but avoid using inline

  for complex content that needs block semantics (e.g., long paragraphs, headings).

• Ensure keyboard and screen-reader behavior remains clear — inline paragraphs behave like text spans; if they contain interactive elements, ensure focus and roles are correct.

Browser support and Tailwind version

• This syntax relies on Tailwind CSS v3+ arbitrary variants/selectors. Ensure your Tailwind setup supports arbitrary selectors.
• Generated CSS uses standard display property; browser compatibility is broad.

Quick checklist

• Use when you need inline flow for

  children.

• Confirm Tailwind v3+ and build config allow arbitrary selectors.
• Add spacing or typographic utilities as needed to maintain readability.

If you want, I can show how to achieve the same effect without arbitrary selectors or provide a variant that targets all descendant

(not only direct children).