py-1 [&>p]:inline
What this selector and utility do
The string py-1 [&>p]:inline is a small Tailwind CSS utility + arbitrary selector combo. It applies two things:
- py-1 — adds vertical padding (padding-top and padding-bottom) of Tailwind’s spacing scale value
1(usually 0.25rem / 4px by default). - [&>p]:inline — an arbitrary selector that targets direct child
inline.
Together they make the container have small vertical padding while forcing immediate paragraph children to render inline instead of block, which changes text flow and spacing inside the container.
When to use it
Use this combination when you want a container that:
- Keeps small vertical breathing room (py-1),
- But you need paragraph tags inside the container to behave like inline elements (so they sit on the same line or flow inline with surrounding content) without changing global paragraph styles.
Common cases:
- Inline lists of short paragraphs or tags where semantic
- Small UI components where paragraphs are used for semantics but you want them to not create block breaks.
How it works (mechanics)
Tailwind’s arbitrary variants let you write selectors inside square brackets. [&>p]:inline compiles into a CSS rule that scopes the selector to the element with that class — for example, if your class is applied to a div with generated class .group-xyz, Tailwind outputs something like:
.container-class { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.container-class > p { display: inline; }
This uses the parent selector & to keep the rule specific to the element carrying the utility, preventing global overrides.
Example usage
HTML:
<div class=“py-1 [&>p]:inline”><p>First short paragraph.</p> <p>Second short paragraph.</p></div>Result: Both paragraphs appear inline on the same line (if space allows) and the container keeps 0.25rem vertical padding.
Notes and caveats
- Inline paragraphs will not respect vertical margins the same way as block paragraphs. If you relied on top/bottom margins for spacing between paragraphs, switch to margin utilities on the container or use inline spacing (e.g.,
space-x-2on a flex container). - Browser default styles (like margin on p) may still apply; Tailwind doesn’t reset those unless you use a preflight/normalize. You may want to add
m-0to the p elements if you need to remove default margins:py-1 [&>p]:inline [&>p]:m-0. - Ensure accessibility and semantics: forcing block-level semantic elements to inline can be fine visually but consider whether another element (span) would be more appropriate semantically.
Variations
- Make paragraphs inline-block instead:
[&>p]:inline-block - Target nested paragraphs: `[& p]:inline
- Add responsive control:
md:[&>p]:inlineto apply only at medium screens and up.
Summary
py-1 [&>p]:inline is a concise Tailwind utility combo to give a container small vertical padding while forcing direct paragraph children to behave like inline elements — useful for compact, inline flows while preserving semantic markup.
Leave a Reply