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

py-1 [&>p]:inline

What this utility-style class does

py-1 sets vertical padding (padding-top and padding-bottom) to a small size. The selector-like fragment [&>p]:inline is a Tailwind-style arbitrary selector that applies the inline display to direct child

elements. Put together, this pattern means: add small vertical padding to the container, and make its immediate paragraph children render inline.

When to use it

• You want compact vertical spacing but need paragraph tags inside a container to flow inline (for sentence-level semantics while keeping inline layout).
• Converting block paragraphs into inline text without changing markup.
• Fine-tuning spacing around inline paragraphs in components like badges, labels, or inline disclaimers.

Example (HTML + Tailwind)

<div class=“py-1 [&>p]:inline”><p>This is inline paragraph one.</p>  <p>This is inline paragraph two.</p></div>

Rendered result:

• The container has small vertical padding.
• Each immediate

  child displays inline, so the paragraphs flow on the same line (wrapping naturally) rather than stacking.

Notes and gotchas

• Inline paragraphs lose block behavior (no vertical margins, width expands only to content). Use spans if semantic paragraph meaning isn’t important.
• Browser whitespace between inline elements can introduce gaps; remove or control whitespace in markup if needed.
• If you need responsive behavior, wrap the arbitrary selector with breakpoints, e.g., md:[&>p]:inline to only apply at medium screens and up.

Alternatives

• inline-block ([&>p]:inline-block) if you need width/height control while keeping inline flow.