data-streamdown=

py-1 [&>p]:inline

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

What it means

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

  elements and set their display to inline.

Combined, the parent element gets small vertical padding while any direct child

elements are rendered inline instead of block.

Why use this

• Convert paragraphs inside a container into inline flow while preserving vertical spacing on the container.
• Useful when you want inline text semantics for children but still need container spacing for layout or visual rhythm.
• Handy for compact UI components (badges, inline lists, tag-like elements) where default block paragraphs would introduce unwanted breaks.

Example HTML

<div class=“py-1 [&>p]:inline bg-gray-50 border rounded px-2”><p>First part,</p>  <p>second part,</p>  <p>and third part.</p></div>

Rendered result: the three

elements appear inline on one line (wrapping if necessary), while the container keeps 0.25rem vertical padding and other utilities (background, border, horizontal padding).

Notes & caveats

• [&>p]:inline targets only direct children that are

  elements; nested

  deep inside other wrappers won’t be affected.

• Converting semantic block elements to inline can affect accessibility and text flow (line breaks, margins). Consider using if inline semantics are primary.
• If you want inline-block behavior (allowing width/height), use [&>p]:inline-block.
• Ensure Tailwind’s JIT or arbitrary variant support is enabled (Tailwind v3+). If your build strips unknown classes, add them to the safelist.

When to prefer alternatives

• Use utility classes on the children themselves when you control the child markup.
• Use CSS with component classes if the selector is complex or needs to target multiple element types (e.g., [&>*]:inline).

Quick summary

Use py-1 [&>p]:inline to give a container small vertical padding while forcing its direct

children to render inline—useful for compact inline text combinations while keeping container spacing.