That selector/utility appears to mix Tailwind-style spacing and a CSS selector. Interpreting it two ways:
- Tailwind-like utility: “py-1” means “padding-top: 0.25rem; padding-bottom: 0.25rem” (assuming default Tailwind scale where 1 = 0.25rem).
- CSS selector ”[&>p]:inline”: using frameworks like Tailwind JIT or css-in-js that support parent-aware arbitrary variants — this targets direct child
elements and applies display: inline to them. In Tailwind arbitrary variant syntax it becomes:
- [&>p]:inline → when applied to a parent, set its direct child p elements to display: inline.
Combined usage (e.g., class=“py-1 [&>p]:inline”) means:
- The element gets vertical padding of 0.25rem.
- Any direct child
elements become inline.
Example HTML:
First
Second
Result:
- div has small vertical padding.
- both p elements render as inline (flow inline with no block breaks).
Notes:
- Variant syntax requires a build tool that supports arbitrary variants (Tailwind v3+ JIT).
Leave a Reply