How

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 inline utility to them. The & represents the current selector; >p means “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.

Your email address will not be published. Required fields are marked *