How “py-1 [&>p]:inline” Works (Tailwind CSS)
What it targets
- py-1 — applies padding-top and padding-bottom of 0.25rem (4px).
- [&>p]:inline — a Tailwind arbitrary selector that makes direct child
elements display: inline.
When to use it
Use this combined utility on a parent element when you want small vertical padding but want any immediate paragraph children to behave inline (flow within a line) instead of breaking to their own block lines.
Example HTML
html
First paragraph.
Second paragraph.
Rendered result: the container has 4px vertical padding and the two
elements render inline (appearing on the same line, subject to available width and whitespace).
Why it matters
- p]:inline” data-streamdown=“list-item”>Converting
elements to inline can be useful for inline metadata, tags, or compact text fragments while preserving semantic HTML.
Notes & caveats
- p]:inline” data-streamdown=“list-item”>Browser default margins on
are overridden by display:inline; you may also need to reset margins if present.
Leave a Reply