p]:inline” data-streamdown=”list-item”>How BackData Pro Protects Your Critical Business Data

Styling paragraphs inline with Tailwind: py-1 [&>p]:inline

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

What it means

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

  elements and set their display to inline.

Combined, the classes add small vertical spacing to a parent element while forcing its immediate paragraph children to render inline instead of the default block layout.

When to use this pattern

• You want compact vertical spacing on a container but need paragraph elements inside to flow inline (for example, inline badges, inline labels, or compact text chips).
• You need to override default browser styles without writing custom CSS files.
• You want to keep markup semantic (use

  for paragraphs) but display them inline for a specific layout.

Practical examples

1. Inline chips inside a padded wrapper

<div class=“py-1 [&>p]:inline bg-gray-100 rounded”><p class=“mr-2”>Chip A</p>  <p class=“mr-2”>Chip B</p>  <p>Chip C</p></div>

Result: the wrapper has slight vertical padding; the

elements sit inline with small gaps.

2. Inline labels in a form hint

<div class=“py-1 [&>p]:inline text-sm text-gray-600”>  <p class=“mr-1”>Required</p>  <p class=“mr-1”>•</p>  <p>Max 255 characters</p></div>

Accessibility and semantics

• Using

  keeps semantic meaning, which benefits screen readers; changing display to inline does not affect semantic structure.

• Ensure visual grouping and spacing remain clear for keyboard and assistive users—use sufficient contrast and focus styles when needed.

Caveats

• The arbitrary selector targets only direct children (> p). Nested

  elements deeper in the tree won’t be affected.

• If other utilities set display on the same elements (e.g., block, flex), order of classes and specificity matters—Tailwind applies utilities in CSS order; arbitrary selectors are placed after standard utilities, but test if conflicts arise.
• Browser default margins on

  may still apply; consider resetting margins with m-0 if unwanted spacing remains.

Summary

py-1 [&>p]:inline is a concise Tailwind pattern to give a container small vertical padding while rendering its immediate paragraph children inline — useful for compact inline groupings while preserving semantic HTML.