py-1 [&>p]:inline
What it is
The selector-like string “py-1 [&>p]:inline” appears to be a utility-class expression used with Tailwind CSS-style utility frameworks or with Tailwind’s JIT arbitrary variants syntax. It combines two concerns:
- py-1 — apply vertical padding (padding-top and padding-bottom) of 0.25rem (Tailwind’s spacing scale) to the element.
- [&>p]:inline — an arbitrary variant that targets direct child
elements and applies display: inline to them.
Together this expresses: give the element small vertical padding, and make any direct
children render inline instead of as block elements.
Why you might use it
- Inline paragraphs: Converting paragraph children to inline can be useful when composing small components where you want paragraph semantics but inline flow (e.g., inline labels, mixed text fragments).
- Tight vertical spacing: py-1 keeps the element compact vertically while allowing its inline children to flow horizontally.
- Single-class convenience: Using an arbitrary variant keeps CSS authoring concise, avoiding separate custom CSS rules.
How it works (Tailwind JIT arbitrary variants)
Tailwind supports arbitrary variants using square-bracket syntax. The pattern [&>p]:inline means “for the current element, add a rule that applies inline to any direct p children.” Tailwind compiles this into a nested selector such as:
.selector { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.selector > p { display: inline; }
The [& … ] prefix tells Tailwind to output the contents inside the brackets as a nested selector relative to the element.
Example usage in HTML
<div class=“py-1 [&>p]:inline”><p>First fragment,</p> <p>second fragment.</p></div>Rendered result: “First fragment, second fragment.” on one line (wrapping as needed), with the container having small vertical padding.
Accessibility and semantics
- Paragraph semantics remain, so screen readers still recognize
elements even when displayed inline; that can be appropriate, but consider whether inline semantics (e.g., spans) might be clearer.
- Ensure line breaks and spacing are handled intentionally; inline paragraphs remove default spacing between block paragraphs, so you may need to add margins or separators if required.
Alternatives
- Use spans instead of paragraphs if you don’t need paragraph semantics.
- Add a custom CSS class:
.inline-paragraphs { padding: .25rem 0; }.inline-paragraphs > p { display: inline; }- Use utility classes on each child:
…
When not to use
- Avoid if paragraphs need to remain block-level for readability or layout.
- Don’t use when child elements include block-level children that rely on block layout.
Summary
“py-1 [&>p]:inline” is a concise Tailwind-style expression that applies small vertical padding to an element and forces its direct paragraph children to display inline. It’s useful for compact inline text compositions but consider semantics and accessibility before replacing block paragraphs with inline display.
Leave a Reply