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

py-1 [&>p]:inline

What it is

This is a Tailwind CSS utility pattern combining spacing and an arbitrary selector:

• py-1 applies vertical padding of 0.25rem (padding-top and padding-bottom).
• [&>p]:inline is an arbitrary selector using Tailwind’s JIT bracket notation to target direct child

  elements and set their display to inline.

When to use it

Use this combo on a container when you want small vertical spacing but need its direct paragraph children to flow inline (for example, rendering short inline paragraphs or labels without block breaks).

Example HTML

<div class=“py-1 [&>p]:inline”><p>Label:</p>  <p>Value</p></div>

Resulting behavior

• The container gets 0.25rem top and bottom padding.
• The two

  elements are displayed inline, so they sit on the same line separated by normal inline spacing rather than stacking.

Notes and tips

• Tailwind’s arbitrary selector syntax requires JIT mode (available in modern Tailwind builds).
• If child

  elements contain block-level children, display:inline may cause layout issues; consider inline-block or flex as alternatives.

• [&_p]:inline or [&>p]:inline depending on scope needed.