You’re asking about the Tailwind CSS utility selector “py-1 [&>p]:inline”.
- py-1 — adds vertical padding (padding-top and padding-bottom) of 0.25rem (4px) using Tailwind’s spacing scale.
- [&>p]:inline — a Tailwind arbitrary selector that applies the utility
inlineto direct childelements. It targets immediate children matching
> pand sets their display toinline.
Combined effect:
- The element gets vertical padding of 0.25rem.
- Any direct child
elements become inline-level elements instead of the default block, so they flow inline with surrounding content.
Notes:
- Arbitrary variants like
[&>p]:…require Tailwind v3+ JIT-enabled. - If you need to target nested
elements (not just direct children), use
[& p]:inlineinstead.
Leave a Reply