p]:inline” data-streamdown=”list-item”>ZZJ QuickEditor: Boost Your Editing Speed Today

Understanding the Tailwind-like Utility: py-1 [&>p]:inline

The class string py-1 [&>p]:inline looks like a utility-style shorthand used in modern CSS frameworks (notably Tailwind CSS with its JIT/Arbitrary variants). It combines vertical padding with an arbitrary selector that targets direct child paragraph elements and changes their display. Below is a concise explanation and practical examples.

What it does

• py-1: Adds vertical padding (padding-top and padding-bottom). In Tailwind CSS default spacing scale, py-1 equals 0.25rem (4px).
• [&>p]:inline: Uses an arbitrary variant to apply the inline display property to every direct child

  element of the element the class is applied to. The & represents the parent selector; >p selects only immediate paragraph children.

When to use it

• You want compact vertical spacing on a container while forcing immediate paragraph children to render inline (useful for inline flow within a block container, for example when mixing text and inline elements).
• Converting default block-level paragraphs into inline elements without adding extra markup or custom CSS.

Example HTML

<div class=“py-1 [&>p]:inline”><p>First inline paragraph.</p>  <p>Second inline paragraph — continues on the same line.</p>  <span>And an inline span.</span></div>

Rendered result: the container has 0.25rem vertical padding; both

elements render inline so they flow on the same line like spans (wrapping according to width).

Browser/CSS notes

• This relies on framework support for arbitrary variants (e.g., Tailwind JIT). Plain CSS does not recognize [&>p]:inline as a class — it must be processed into the corresponding selector .your-class > p { display: inline; }.
• Inline

  elements retain paragraph semantics in the DOM but lose block formatting (margins, block layout). Be mindful of accessibility and semantics when changing display types.

Alternative plain-CSS

If not using a utility framework, write standard CSS:

.container {  padding-top: 0.25rem;  padding-bottom: 0.25rem;}.container > p {  display: inline;}

Quick checklist

• Spacing applied: container has py-1 (0.25rem vertical padding).
• Paragraphs targeted: only direct child

  elements become inline.

• Framework required: needs Tailwind-like arbitrary variant support or preprocessor.

Use this pattern when you need quick, utility-driven control over both spacing and child-element display without creating bespoke CSS classes.