You’re asking about the CSS utility-like snippet py-1 [&>p]:inline. This combines a spacing utility and a Tailwind-style arbitrary selector modifier. Explanation:
- py-1 — sets vertical padding (padding-top and padding-bottom) to the scale value 1 (in Tailwind this is typically 0.25rem unless your config differs).
- [&>p]:inline — an arbitrary variant that targets direct child p elements and applies the
inlinedisplay to them. Broken down:- & represents the current element (the one the classes are on).
- >p means direct child
elements.
- :inline is the utility to apply (display: inline).
Behavior: on the element with these classes, you get vertical padding from py-1, and any direct child
will be rendered display: inline instead of block.
Notes:
- This syntax is specific to Tailwind CSS (arbitrary variants) or similar frameworks that support the
[selector]:utilitypattern — plain CSS or other frameworks won’t recognize it. - Ensure your Tailwind version supports arbitrary variants and that such variants aren’t disabled in config.
- In plain CSS equivalent:
.parent {padding-top: 0.25rem; padding-bottom: 0.25rem;}.parent > p { display: inline;}
If you want behavior for nested p (not only direct children) use [& p]:inline instead of &>p.
Leave a Reply