py-1 [&>p]:inline
What it is
This is a Tailwind CSS utility pattern combining spacing and a child selector using the JIT/Arbitrary variants syntax:
- py-1 — applies vertical padding (padding-top and padding-bottom) of 0.25rem to the element.
- [&>p]:inline — an arbitrary selector that matches direct child
elements and applies the inline display value to them.
Together, it means: add small vertical padding to the container, and make each direct paragraph child display inline.
Why you’d use it
- To collapse paragraph vertical spacing when you want text flows without block breaks but still need container padding.
- Useful for styling compact inline paragraph sequences (e.g., taglines, short metadata lines) while preserving container spacing.
Browser & tooling notes
- Requires Tailwind CSS v3+ with JIT/arbitrary selector support.
- The arbitrary variant syntax relies on the future-proof JIT engine; ensure your build allows arbitrary properties/selectors (no safelist conflicts).
- The selector [&>p] targets only direct children; use [&p] or [&>p]:block etc. for different specificity.
Example HTML
html
<div class=“py-1 [&>p]:inline”><p>First part,</p> <p>second part,</p> <p>third part.</p></div>Rendered result: the container has 0.25rem vertical padding and the three paragraphs flow inline as if they were spans; to add separators, include punctuation or margin on the p elements.
Variations
- &]:pl-6” data-streamdown=“unordered-list”>
- Make paragraphs inline-block: class=“py-1 [&>p]:inline-block”
- Apply spacing between inline paragraphs: class=“py-1 [&>p]:inline [&>p:not(:last-child)]:mr-2_
- Target all descendant paragraphs: class=“py-1 [&p]:inline”
Pitfalls
- &]:pl-6” data-streamdown=“unordered-list”>
- Inline paragraphs lose block semantics (margins, width). If you need wrapping control, use inline-block.
Leave a Reply