Explanation of `py-1 [&>p]:inline
- Context: This is a utility-style class syntax used by Tailwind CSS (or similar utility-first CSS frameworks) when using arbitrary variants and JIT mode. It combines a padding utility with an arbitrary selector variant.
- Breakdown:
- py-1 — applies vertical padding (padding-top and padding-bottom) of the small spacing unit (usually 0.25rem if Tailwind’s default scale is used).
- [&>p]:inline — an arbitrary variant that targets direct child
elements and applies the
inlinedisplay to them. The&represents the element the class is on;>pmeans direct child paragraphs.
- Effect: On an element with both classes, the element itself gets vertical padding (py-1), and any direct child
elements become inline-level elements (display: inline).
- Example HTML:
Paragraph 1
Paragraph 2
- Notes:
- p]:inline” data-streamdown=“list-item”>Useful for scoping styles to specific child selectors without writing separate CSS.
Leave a Reply