You’re asking about the CSS selector “py-1 [&>p]:inline”.
This looks like Tailwind CSS JIT-style arbitrary variants combined with a child selector. Breakdown:
- py-1 — a Tailwind utility that sets padding-top and padding-bottom to 0.25rem (assuming default config).
- [&>p]:inline — an arbitrary variant that applies the utility (here, inline) to direct child p elements. Specifically:
- [&>p] is an arbitrary selector wrapping the child combinator: it targets direct children p (>)
- :inline is the Tailwind utility being applied under that variant, which sets display: inline on those p children.
Combined meaning: apply py-1 to the element itself, and set display: inline on its immediate
children.
Equivalent CSS (approximate):
.element { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.element > p { display: inline; }
Notes:
- Requires Tailwind JIT and support for arbitrary variants.
- Ensure your Tailwind config allows arbitrary variants; if using older Tailwind versions this may not work.
Leave a Reply