in

Written by

pw

in

Uncategorized

You’re referring to a CSS utility pattern: py-1 typically means “padding on the Y axis = 0.25rem” (depends on the design system) and [&>p]:inline is a Tailwind CSS JIT-style arbitrary variant that targets direct child

elements and makes them display: inline.

Explanation:

• py-1: padding-top and padding-bottom set to the spacing scale value 1 (in Tailwind defaults that’s 0.25rem).
• [&>p]:inline: using Tailwind’s arbitrary selector syntax — the & represents the current element, >p selects its direct p children, and :inline applies the inline display utility to those children (equivalent CSS: .parent > p { display: inline; }).

Combined usage (in Tailwind):

• …

Result:

• The div gets vertical padding from py-1, and any direct

  children are displayed inline instead of block.

Notes:

• Arbitrary variants require Tailwind JIT and appropriate safelisting if generated dynamically.
• Spacing values can differ if your project customizes the theme.