py-1 [&>p]:inline

py-1 [&>p]:inline

What this means

The string “py-1 [&>p]:inline” looks like a utility-first CSS class combination used with Tailwind CSS (or a similar framework) and its JIT arbitrary selector syntax. It applies two styles:

• py-1 — sets vertical padding (padding-top and padding-bottom) to the spacing value 1 (usually 0.25rem in Tailwind’s default scale).
• [&>p]:inline — an arbitrary selector that targets direct child

  elements and sets their display to inline.

Together, these classes give the parent element a small vertical padding and force any immediate paragraph children to render inline instead of block.

When to use this pattern

• Tight inline grouping: When you need paragraph elements inside a container to flow inline (for example, creating inline chips or compact metadata where paragraphs are used for semantic separation but should not break lines).
• Mixed content layouts: If the parent needs vertical spacing while its child paragraphs behave like inline elements (icons, tags, or short labels).
• Utility-driven projects: When you prefer to avoid custom CSS and use utility classes to express layout intentions directly in markup.

Example markup

<div class=“py-1 [&>p]:inline”><p>Label A</p>  <p>Label B</p>  <p>Label C</p></div>

This renders the three paragraphs side-by-side with the parent having small vertical padding.

Notes and caveats

• Browser support: The arbitrary selector syntax ([&>p]:…) is supported by Tailwind’s JIT compiler; it’s not plain CSS. It compiles to regular CSS at build time, so final browser support depends on generated CSS only.
• Semantics: Using

  as inline elements is valid HTML, but it may be unexpected. Consider using for inline semantic correctness unless paragraphs are semantically required.

• Specificity: The generated rule matches direct children only; deeper nested

  elements won’t be affected.

• Tailwind config: Ensure your Tailwind version supports arbitrary variants and that the content paths include this file so the class is not purged.

How to replicate in plain CSS

.container {  padding-top: 0.25rem;  padding-bottom: 0.25rem;}.container > p {  display: inline;}

Conclusion

“py-1 [&>p]:inline” is a concise Tailwind-style way to give a container vertical padding while forcing its direct paragraph children to display inline. It’s handy for compact, utility-first layouts but be mindful of semantic and maintainability considerations.