-sd-animation: sd-fadeIn; –sd-duration: 0ms; –sd-easing: ease-in;

py-1 [&>p]:inline

The utility class py-1 [&>p]:inline combines vertical padding with a child selector that alters paragraph layout. This pattern comes from Tailwind CSS’s arbitrary variants and selector syntax (or similar utility-first frameworks) and is useful for applying styles to direct children without adding extra classes to markup.

What it does

• py-1 — adds small vertical padding (top and bottom).
• [&>p]:inline — targets direct child

  elements and sets their display to inline.

When to use it

Use this when you want a container to have vertical spacing but want its immediate paragraph children to flow inline (no block break). Examples:

• Inline text runs inside a padded container.
• Buttons or tags that are paragraphs by default but should display inline.
• Compact UI elements where paragraphs should not create vertical gaps.

Example HTML

<div class=“py-1 [&>p]:inline”><p>First paragraph text — appears inline.</p>  <p>Second paragraph — also inline.</p></div>

CSS behavior (what this compiles to)

• py-1 → padding-top: 0.25rem; padding-bottom: 0.25rem; (Tailwind default scale)
• [&>p]:inline → selector: .your-selector > p { display: inline; }

Notes and caveats

• This targets only direct children (> p). Nested paragraphs inside other elements won’t be affected.
• Inline paragraphs won’t respect vertical margins the same way as block elements; adjust spacing with margin or padding on the container or using inline spacing utilities.
• Ensure your utility framework supports arbitrary variants/selector syntax (Tailwind 3+). If not supported, use a custom CSS rule:

.container { padding-top: .25rem; padding-bottom: .25rem; }.container > p { display: inline; }

Quick alternatives

• Use flex on the container (e.g., py-1 flex flex-wrap) if you want more control over flow and alignment.
• Use inline-block on children to allow width/height while keeping inline flow.