p]:inline” data-streamdown=”list-item”>Comparing RainbowCrack to Modern Password-Cracking Techniques

py-1 [&>p]:inline

This article explains the Tailwind CSS utility-like class string py-1 [&>p]:inline, what each part does, when to use it, and examples showing how it affects layout and content.

What it means

• py-1 — a Tailwind spacing utility that applies padding on the Y axis (top and bottom). At the default scale, py-1 adds 0.25rem (4px) of padding to top and bottom of the element.
• [&>p]:inline — a Tailwind arbitrary variant that targets direct child

  elements and applies the inline display utility to them. The & represents the current selector, and >p matches immediate child paragraph elements. The :inline part applies the inline display value to those matched children.

Combined, py-1 [&>p]:inline means: add small vertical padding to the element itself, and make any direct child paragraphs render as inline elements.

Why use this

• Reduce vertical spacing caused by paragraph block formatting inside a component while preserving padding on the container.
• Keep paragraphs from stacking vertically when you want inline flow (e.g., compact label groups, inline text fragments).
• Avoid adding additional wrapper markup — the selector targets existing direct children.

When not to use

• If paragraphs contain block-level content that requires block layout (headings, lists, large blocks of text).
• If you need the paragraphs to retain margin collapse behavior or vertical spacing; converting to inline removes block semantics and margins.
• When you need to support older browsers that lack full support for modern selector features used by Tailwind’s arbitrary variants (very rare in modern projects).

Examples

1. Compact label group
   HTML:

Label A:  
Value A

Result: Both paragraphs render inline, separated only by text spacing, while the container keeps 4px vertical padding.

2. Inline text fragments inside a card
   HTML:

  
Posted  
March 28, 2026  
•  
Comments: 12

Result: The items flow inline like a single line of text; container padding gives a small vertical buffer.

3. Combining with spacing between inline children
   To add gaps between inline paragraphs, apply a gap or margin to the children:

  
One
Two
Three

This yields inline flow with 0.5rem right margin on each paragraph.

Accessibility and semantics

• Converting paragraphs to inline changes semantics: screen readers still read text, but structural meaning of paragraphs is lost. If the content is truly separate paragraphs, prefer keeping them as block elements and use CSS to adjust spacing instead.
• For inline label-value pairs, consider using or semantic elements (e.g., , ) instead of forcing

  to be inline.

Variations

• Target all descendant paragraphs, not only direct children: [&p]:inline (matches descendant

  ).

• Use other display utilities: [&>p]:inline-block, [&>p]:block.
• Adjust vertical padding: py-0, py-2, etc.