You’re asking about the CSS rule/selector py-1 [&>p]:inline. This looks like a utility-style class combined with a Tailwind/CSS-in-JS bracketed selector. Explanation:
- py-1 — utility class setting vertical padding (padding-top and padding-bottom) to a small value (typically 0.25rem in Tailwind).
- [&>p]:inline — a bracketed variant that targets direct child
elements and applies
display: inlineto them. The&represents the current element;>pmeans direct child paragraphs.
Combined effect: the element gets small vertical padding, and any immediate
children are rendered inline instead of block. In Tailwind JIT/bracket-variant syntax you would write this on an element to scope the child rule to that element only. Example output CSS equivalent:
.element { padding-top: .25rem; padding-bottom: .25rem; }
.element > p { display: inline; }
Notes:
- Browser support depends only on generated CSS; the bracket syntax is a build-time/authoring feature (Tailwind/PostCSS) — browsers see plain CSS.
- [
]syntax.
Leave a Reply