p]:inline” data-streamdown=”list-item”>How to Use RoboForm for Edge: Setup, Features & Tips

py-1 [&>p]:inline

This article explains the Tailwind CSS utility-like class expression py-1 [&>p]:inline, what it does, when to use it, and examples showing how to apply it in real projects.

What it means

• py-1 — Tailwind utility that adds vertical padding (padding-top and padding-bottom) of 0.25rem (4px) when using the default spacing scale.
• [&>p]:inline — Tailwind’s arbitrary variant syntax that targets direct child

  elements and applies the inline utility to them. It compiles to a selector like .your-class > p { display: inline; }.

Combined, py-1 [&>p]:inline applies vertical padding to the element itself while forcing any immediate

children to render as inline elements.

When to use it

• You want compact vertical spacing on a container but need paragraph children to flow inline (for example, when mixing text nodes and inline paragraphs inside a flex item or an inline container).
• You need to override default block behavior of

  tags without writing extra CSS.

• When keeping styles co-located in class attributes with Tailwind and avoiding separate stylesheet rules.

How it works under the hood

Tailwind’s arbitrary variant syntax uses square brackets to accept raw CSS selectors. [&>p]:inline tells Tailwind to prepend the parent selector and append > p to target direct children. Tailwind then applies the display: inline; rule for those matches. The py-1 part is a regular utility adding vertical padding.

Examples

1. Inline paragraphs inside a container

First paragraph.  
Second paragraph.

Result: container has 0.25rem vertical padding; the two

elements display inline, so they flow on the same line (wrapping as needed).

2. Combining with spacing and separators

  
Item A  
Item B  
Item C

Result: inline paragraphs with right margin between them, creating a horizontal list-like layout without changing markup.

3. Within a flex item

  
    
Label:    
Value  

Result: label and value sit inline inside their container, aligning nicely with other flex children.

Caveats and browser behavior

• Converting

  to display:inline removes block semantics (margins, width behavior). Be mindful of accessibility and semantic expectations.

• Direct-child selector > only targets immediate

  children. Nested

  elements inside other wrappers won’t be affected.

• Ensure Tailwind is configured to allow arbitrary variants (Tailwind v3+ supports them by default).

Alternatives

• Use inline-block if you need inline behavior but still want block-level sizing.
• Add a utility class to the

  elements directly instead of using arbitrary variants.

• Write a small custom CSS rule if the selector is complex or used in many places.

Summary

py-1 [&>p]:inline is a concise Tailwind pattern to give a container small vertical padding while forcing immediate paragraph children to behave like inline elements—useful for compact, inline text groupings without extra CSS.