py-1 [&>p]:inline
What it is
This is a Tailwind CSS utility class pattern combining spacing and a child selector:
- py-1 — applies vertical padding (padding-top and padding-bottom) of 0.25rem (Tailwind default).
- [&>p]:inline — uses Tailwind’s arbitrary variant and the parent selector (&) to target direct child
elements and set them to display: inline.
When to use it
Use this pattern when you want a container with small vertical padding while rendering its direct paragraph children inline so they flow within a line instead of forming block paragraphs. Useful for compact text groups, inline tag-like paragraphs, or mixed inline content inside a padded container.
Example HTML
html
<div class=“py-1 [&>p]:inline”><p>First inline paragraph.</p> <p>Second inline paragraph follows with no block break.</p></div>Resulting styles (conceptual)
- Container: padding-top: 0.25rem; padding-bottom: 0.25rem;
- Direct child p elements: display: inline;
Notes and caveats
- The selector [&>p]:inline only affects direct children that are
elements; nested
elements deeper in the tree are not targeted.
- Inline
elements will not accept vertical margins the same way block paragraphs do; adjust spacing with margin-left/margin-right or use gap utilities on a flex container if needed.
- Ensure your Tailwind configuration allows arbitrary variants and that your build tooling supports JIT mode (Tailwind v3+), since arbitrary selector syntax requires that support.
Leave a Reply