p]:inline” data-streamdown=”list-item”>Abluescarab Software CD-Key Generator: Download & Activation Guide

py-1 [&>p]:inline

This short article explains the Tailwind CSS utility-like selector syntax “py-1 [&>p]:inline”, what it does, and when to use it.

What it is

• py-1 — adds vertical padding (padding-top and padding-bottom) of Tailwind spacing unit 1 to an element.
• [&>p]:inline — a variant using Tailwind’s arbitrary selector feature that targets direct child

  elements and applies the inline display to them.

Together, the class string applies vertical padding to the parent element while making its immediate paragraph children render inline.

How it works

• Tailwind’s spacing scale maps py-1 to a small vertical padding (by default 0.25rem).
• The arbitrary selector syntax [&>p]:… lets you write a CSS selector relative to the element the class is placed on. & represents the element itself; &>p targets direct child p elements.
• The :inline portion applies the display: inline; rule to those matched children.

Generated CSS (conceptually):

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

When to use it

• You want small vertical spacing on a container while forcing its immediate paragraph children to flow inline (for example, when combining text fragments or inline badges inside a container).
• You prefer keeping utility rules in the HTML instead of authoring custom CSS.

Example

HTML:

First part,  
 second part.

Rendered result: the container has small vertical padding; the two

elements appear inline, so the text flows on a single line like “First part, second part.”

Caveats

• Browser default margins on

  elements may still apply unless reset; consider combining with [&>p]:m-0 or [&>p]:!m-0 to remove margins.

• Arbitrary selectors require a Tailwind version that supports the feature and may be restricted by your project’s safelist/escape rules.
• Overusing complex arbitrary selectors can make HTML harder to read; prefer semantic CSS when rules grow complex.

Alternatives

• Use a utility to change display on a wrapper (e.g., make wrapper flex or inline-flex) and adjust children accordingly.