py-1 [&>p]:inline

py-1 [&>p]:inline

What it is

The snippet “py-1 [&>p]:inline” is an example of Tailwind CSS utility classes using JIT (Just-In-Time) mode’s arbitrary variants and nested selector support. It applies vertical padding to an element and changes the display behavior of its direct child

elements.

Breakdown

• py-1 — Tailwind utility that sets padding-top and padding-bottom to 0.25rem (4px) by default.
• [&>p]:inline — An arbitrary variant in Tailwind that targets direct child

  elements (the CSS selector ”& > p”) and applies the utility inline to them (making those

  elements display: inline).

In raw CSS, this corresponds to:

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

When to use it

• When you want small vertical spacing around a container but want its immediate paragraph children to behave like inline elements (for example, to flow alongside other inline content without block breaks).
• Useful in components where paragraphs are used as inline text snippets, tags, or metadata but still need container padding.

Examples

HTML:

  
First inline paragraph.  
Second inline paragraph.

Rendered behavior:

• The container has 4px vertical padding.
• Each

  inside is displayed inline, so they flow on the same line unless wrapping occurs.

Notes & caveats

• Using block-level semantics like

  as inline can be semantically off; consider using for inline text to preserve HTML semantics.

• Browser default margins on

  are not controlled by display alone; if needed, reset margins (e.g., m-0) to avoid unexpected spacing.

• Ensure your Tailwind config enables JIT and arbitrary variants (Tailwind v3+).