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

py-1 [&>p]:inline

What this selector does

• py-1: a utility class (commonly from Tailwind CSS) that applies vertical padding of 0.25rem (padding-top and padding-bottom).
• [&>p]:inline: a JIT/variant-style selector (Tailwind’s arbitrary variants syntax) that targets direct child

  elements and sets their display to inline.

Combined, the class string “py-1 [&>p]:inline” adds small vertical padding to an element while forcing its immediate paragraph children to render inline instead of as block elements.

When to use it

• When you need a container with slight vertical spacing but want its direct paragraphs to flow inline (for compact labels, mixed text runs, or inline badges).
• Useful in components where semantic

  tags are required but block behavior breaks layout (e.g., inside flex rows or tight horizontal lists).

Example HTML

<div class=“py-1 [&>p]:inline”><p>First inline paragraph.</p>  <p>Second inline paragraph.</p>  <span>And a span.</span></div>

Rendered result: the div gets vertical padding; the two

elements behave like inline elements and sit on the same line with the span.

Accessibility & semantics

• Using

  as inline is semantically unusual—paragraphs imply block-level grouping of text. Prefer inline elements (span) if content is truly inline.

• If you must use

  , ensure line breaks and reading order remain logical for screen readers.

Alternatives

• Use or for inline semantics.
• Apply utility classes to child selectors normally via a dedicated CSS rule if you prefer not to use Tailwind’s arbitrary variants.

Browser support

• Tailwind’s generated CSS is supported in modern browsers. The arbitrary variant syntax compiles to standard CSS selectors, so compatibility depends on the resulting CSS only.

Summary

“py-1 [&>p]:inline” gives a container small vertical padding while forcing its direct

children to display inline—handy for layout tweaks but consider semantic alternatives when possible.