p]:inline” data-streamdown=”list-item”>BII Manager Job Description: Responsibilities, KPIs, and Career Path

What it does

The selector py-1 [&>p]:inline is Tailwind CSS (JIT) syntax using the arbitrary selector feature. It applies two styles to an element:

• py-1 — sets vertical padding (padding-top and padding-bottom) to Tailwind’s spacing value 1 (usually 0.25rem by default).
• [&>p]:inline — targets direct child

  elements (> p) and sets their display to inline.

How it works

• py-1 is a normal Tailwind utility class.
• [&>p]:inline is an arbitrary variant using the & placeholder for the current element. It compiles to a selector like .your-class > p { display: inline; } so only immediate

  children become inline.

Use case

Wrap a container that needs small vertical padding while forcing its direct paragraph children to flow inline (useful when you want paragraph semantics but inline layout).

Example HTML

First  
Second

Rendered result: container has small vertical padding; each direct p becomes inline (they flow on the same line).