You’re referencing a utility-style rule: py-1 [&>p]:inline. This looks like a Tailwind CSS (or Tailwind-like) shorthand combining a spacing utility with a scoped child selector. Explanation:
- py-1 — sets vertical padding (padding-top and padding-bottom) to the utility value 1 (usually 0.25rem in Tailwind by default).
- [&>p]:inline — an arbitrary variant using the parent selector (&) to target direct child
elements and apply the
inlineutility to them (making thoseelements display: inline).
Effectively, applied to an element, it:
- Gives that element vertical padding of 0.25rem.
- Makes any direct child
elements display inline.
Example (conceptual HTML with Tailwind JIT arbitrary variant support):
Paragraph A
Nested
Notes:
- This requires a build setup that supports Tailwind’s arbitrary variants (JIT mode) or a framework that understands the same syntax.
- The exact size of
py-1depends on your Tailwind config; defaults are 0.25rem for1. - Browser support: generated CSS is regular selectors and works in browsers; ensure your tooling escapes the selector properly.
Leave a Reply