It looks like you’re referring to a CSS/Tailwind-style utility: “py-1 [&>p]:inline”. Here’s what it does and how it behaves:
- py-1 — applies vertical padding (padding-top and padding-bottom) of 0.25rem (Tailwind’s spacing scale) to the element.
- [&>p]:inline — uses Tailwind’s arbitrary selector feature to target direct child
elements and apply the inline display utility to them (i.e., display: inline).
Behavior notes:
- The parent gets the vertical padding from py-1.
- Direct child
elements become inline, so they will flow inline with other inline content and ignore default block spacing (no block line breaks).
- Because
elements are made inline, their vertical margin behavior may change; margins may collapse differently and vertical spacing may rely on the parent’s padding instead.
- If there are nested paragraphs (not direct children), the selector [&>p] won’t affect them; use [&p] or a different selector to target descendants.
- Browser output: equivalent CSS roughly:
.your-class { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.your-class > p { display: inline; }
Compatibility:
- &]:pl-6” data-streamdown=“unordered-list”>
- Tailwind arbitrary selector syntax requires a Tailwind v2.2+ feature set (arbitrary variants/selectors). Ensure your Tailwind config allows arbitrary variants.
- Using inline on paragraphs can affect accessibility and semantics—preserve meaning and use only when appropriate.
If you want examples or alternatives (e.g., target all descendant
, or make them inline-block), tell me which and I’ll provide code._
Leave a Reply