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 inline to direct child

    elements. It targets immediate children matching > p and sets their display to inline.

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]:inline instead.

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