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

CSS Utility Explained: py-1 [&>p]:inline

This single-line utility applies two Tailwind-style rules together: vertical padding and a child selector that changes direct paragraph elements to inline.

What it does

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

  elements and sets their display to inline.

Use case

Wrap a container where you want compact vertical spacing but want immediate paragraph children to flow inline (no block breaks). Example: inline labels or short phrases separated by

without extra block spacing.

Example HTML

Label:  
Value

Rendered result: the container has slight vertical padding, and “Label: Value” appears on the same line because the

elements are inline.

Notes and alternatives

• This relies on a utility CSS processor that supports bracketed child selectors (like Tailwind CSS with JIT arbitrary variants).
• [&>p]:mr-2).
• [&_p]:inline if supported.