Times

You’re asking about the CSS utility/selector py-1 [&>p]:inline.

Context: This looks like a Tailwind CSS-style utility using a bracketed arbitrary variant combined with a child selector. It applies padding on the Y axis and sets direct child

elements to inline.
Breakdown
- py-1 — sets vertical padding (padding-top and padding-bottom) to Tailwind’s spacing scale value 1 (usually 0.25rem unless customized).
- [&>p]:inline — an arbitrary variant that targets direct child
  elements (> p) and applies the inline display utility to them.
Effect (in Tailwind)
- The element with these classes will have small vertical padding.
- Any immediate child
  elements will be styled display: inline; instead of the default display: block;.

Generated CSS example

css

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }.[&>p]:inline > p { display: inline; } /conceptual; actual generated selector differs /

Tailwind actually generates a selector like:

css

.py-1[&>p]:inline { / not actual; conceptually / }/ Real output uses escaped/variant syntax, e.g.: */.py-1 [&>p]:inline > p { display: inline; }

Notes
- Requires Tailwind JIT / arbitrary variants support.
- Use when you need direct child paragraphs to flow inline while preserving padding on the parent.
- If you need to target nested paragraphs, adjust the selector (e.g., [&_p]:inline or [&>p]:inline with different combinators).

Comments