Scanner

Article: py-1 [&>p]:inline

The utility class py-1 [&>p]:inline is a Tailwind CSS-style JIT (just-in-time) grouping of two separate rules applied to the same element:

py-1 — sets vertical padding (padding-top and padding-bottom) to 0.25rem (4px) when using default Tailwind spacing scale.
[&>p]:inline — uses the arbitrary variant selector to target direct child
elements and set their display to inline.

Together they give an element small vertical padding while forcing any immediate paragraph children to render inline rather than block.

Use this combo when you want:

Compact vertical spacing around a container.
Paragraphs inside that container to flow inline (e.g., to keep text on the same line or to allow inline wrapping without block breaks).
Examples: inline labels separated by
tags, small UI chips that use
for semantics but you want them inline, or when integrating third-party markup that uses
but you need inline behavior.

html

<div class=“py-1 [&>p]:inline”><p>First</p>  <p>Second</p>  <p>Third</p></div>

Rendered effect: the container has 0.25rem vertical padding and the three

elements appear inline next to each other instead of on separate lines.

If you wanted to write plain CSS equivalent without Tailwind:

css

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

[&>p]:inline relies on Tailwind’s JIT arbitrary variants and the & parent selector support; ensure your Tailwind version supports this syntax.
For spacing scale differences (custom config), py-1 may map to a different value.
If you need block-level spacing between inline elements, consider display: inline-block on the
s and horizontal margin.
inline is valid HTML but consider whether or would be more semantically appropriate for inline content.