You’re referencing a Tailwind CSS utility: “py-1 [&>p]:inline”. Explanation:
- py-1 — sets vertical padding (padding-top and padding-bottom) to 0.25rem (4px) using Tailwind’s spacing scale.
- [&>p]:inline — a variant that targets direct child
elements and applies display: inline to them. The [&…] syntax is Tailwind’s arbitrary selector feature allowing scoped CSS for nested selectors.
Combined effect:
- The element gets 0.25rem vertical padding.
- Any direct child
elements become inline (so they won’t create block line breaks; they flow inline with surrounding content).
Notes:
- [&>p]:inline compiles to a generated selector like .your-class[>&p]:inline > p { display: inline; } — implemented via Tailwind’s arbitrary selector support, so ensure your Tailwind config allows arbitrary variants (default in modern Tailwind).
Leave a Reply