You’re referencing a Tailwind CSS utility: the arbitrary selector syntax “py-1 [&>p]:inline”.
Explanation:
- py-1 sets vertical padding (padding-top and padding-bottom) to Tailwind’s spacing scale value 1.
- [&>p]:inline is an arbitrary selector variant that targets direct child
elements and applies the inline display to them.
- Combined effect: the container gets vertical padding; any direct child
inside that container becomes display: inline.
Generated CSS (approximate):
.container {padding-top: 0.25rem; /* py-1 / padding-bottom: 0.25rem;}.container > p { display: inline; / [&>p]:inline */}
Notes:
- The arbitrary selector uses the JIT/modern Tailwind variant syntax; it must be enabled (Tailwind v3+ with Just-In-Time) and the selector should be valid CSS.
- For nested or non-direct p descendants, adjust selector (e.g., [&p]:inline for any descendant).
Leave a Reply