Orbiting

You’re referencing a CSS selector/format used in some tooling (likely a shorthand or custom syntax). Interpreting as: “py-1 [&>p]:inline” this looks like Tailwind CSS utility + JIT arbitrary variant that targets direct child

elements.

What it does (reasonable assumption):

  • py-1 applies padding-top and padding-bottom: 0.25rem (Tailwind default).
  • [&>p]:inline using Tailwind’s arbitrary selector feature, it sets direct child p elements to display: inline.

Equivalent CSS:

css
.selector {padding-top: 0.25rem;  padding-bottom: 0.25rem;}.selector > p {  display: inline;}

Usage:

  • Apply to a wrapper element to add vertical padding while forcing immediate

    children to be inline (useful when you want paragraph tags not to create block breaks).

  • Works in Tailwind v3+ with JIT and arbitrary variants enabled.

Caveats:

  • [&>p]:inline only targets direct children ( > p). Use [&p]:inline or [&>p]:inline-block variants for different scopes or displays.
  • Ensure your Tailwind config allows arbitrary variants if using strict safelisting.

Comments

Leave a Reply

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