py-1 [&>p]:inline — What it does and how to use it
The selector-like expression py-1 [&>p]:inline is a compact utility-style class pattern used in Tailwind CSS (or Tailwind-inspired utility systems) when using the JIT or arbitrary variants feature. It combines spacing and an arbitrary selector to apply a style to direct child
elements. Below is a concise explanation, examples, and common use cases.
What each part means
- py-1 — a utility that applies vertical padding (padding-top and padding-bottom) with the scale value 1 (in Tailwind’s default spacing scale, that’s 0.25rem). Applied to the element the class is placed on.
- [&>p]:inline — an arbitrary variant that targets direct child
elements of the element with the class. The [&>p] is a selector that means “for any direct child p”, and the :inline part applies the inline display utility to those matched
elements. In effect, direct child
elements will receive display: inline.
Resulting CSS (conceptual)
If you apply these together on an element, the effect is equivalent to:
- The host element: padding-top: 0.25rem; padding-bottom: 0.25rem;
- Any direct child p: display: inline;
Tailwind JIT compiles the arbitrary variant into a selector similar to:
.selector { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.selector > p { display: inline; }
When to use this pattern
- You want vertical spacing on a container but need paragraph children to flow inline (e.g., create an inline sequence of paragraphs while keeping container padding).
- Converting block-level paragraphs into inline behavior for specific layout tweaks without editing the HTML.
- Applying a style to child elements without adding extra classes to the children.
Examples
- Basic HTML
First paragraph.
Second paragraph.
Third paragraph.
Rendered effect: the div has small vertical padding; the three
elements render inline (adjacent text flow).
- With spacing between inline paragraphs
Alpha
Beta
Gamma
Here each paragraph except the last gets a right margin (mr-2) while remaining inline.
Caveats
- Using inline display on semantic
elements changes their natural block behavior—ensure it won’t break accessibility or semantics in your context.
- Arbitrary variants require JIT-enabled Tailwind and may not work in older configurations or other CSS frameworks.
- Selector complexity can increase stylesheet size if overused; prefer adding classes to children when practical.
Alternatives
- Add a utility class directly on child
elements (e.g., class=“inline”) if you control the HTML.
- Use flex or grid on the parent to control child layout without altering display of semantic elements.
Quick checklist
- Use JIT-enabled Tailwind.
- Confirm you need direct-child targeting (>p) rather than a broader selector.
- Consider semantics and accessibility before making paragraphs inline.
Leave a Reply