You’re asking about the selector/utility “py-1 [&>p]:inline”. This looks like Tailwind CSS (or a Tailwind-like) utility with a JIT/variant group. Explanation:
- py-1: Applies padding-top and padding-bottom of 0.25rem (Tailwind default spacing scale where 1 = 0.25rem).
- [&>p]:inline: This is a JIT-style arbitrary variant that targets direct child
elements and sets their display to inline. Broken down:
- [&>p] is the selector portion — the ampersand (&) is replaced with the parent selector, so it becomes parent > p.
- :inline is the utility applied to that selector, setting display: inline.
Generated CSS (equivalent):
.parent { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.parent > p { display: inline; }
Notes:
- This requires Tailwind JIT/arbitrary variants support (Tailwind v2.2+). Syntax must be allowed in your config.
- Use when you want container vertical padding but make direct paragraph children inline.
Leave a Reply