py-1 [&>p]:inline
What it is
This is a CSS utility-like rule (Tailwind-style JIT arbitrary selector) that applies vertical padding and sets direct child paragraph elements to display inline. Interpreting it:
- py-1 — shorthand for padding-top and padding-bottom: 0.25rem (Tailwind default for 1).
- [&>p]:inline — an arbitrary variant selecting direct child p elements and setting them to inline.
When to use it
Use this when you want a container with small vertical padding while making its immediate paragraph children flow inline with surrounding text (no block stacking). Useful for compact UI elements like badges, chips, or inline disclaimers composed of
tags.
Example (HTML + Tailwind JIT)
html
<div class=“py-1 [&>p]:inline”><p>First part,</p> <p>second part.</p></div>Rendered result: both paragraphs appear inline (as if wrapped in spans) with the container keeping 0.25rem vertical padding.
Notes and caveats
- Using
for inline content is semantically unusual; consider for inline needs.
- Tailwind’s arbitrary variants require JIT mode and a build setup that supports them.
- p]:inline” data-streamdown=“list-item”>If you want all descendant p elements (not just direct children), use [&p]:inline instead.
Leave a Reply