You’re asking about the CSS selector syntax py-1 [&>p]:inline. This uses utility classes plus a bracketed selector (Tailwind-style JIT arbitrary selector). Explanation:
- py-1 — a utility that sets padding-top and padding-bottom to the spacing value 1 (usually 0.25rem in Tailwind default).
- [&>p]:inline — an arbitrary variant that targets direct child
elements and applies the
inlineutility to them. The&represents the current selector;>pmeans “direct child p”. So this compiles to something like:- Parent element: padding-top and padding-bottom = 0.25rem.
- Direct child
: display: inline;
Usage example (Tailwind/JIT):
Paragraph 1
Nested paragraph — not targeted
Result: the first direct
becomes inline; the nested
inside is not affected.
Browser support: this is a build-time feature of Tailwind (arbitrary variants) — not raw CSS; it requires Tailwind JIT or a processor that supports bracketed selectors.
Leave a Reply