You’re asking about the selector syntax py-1 [&>p]:inline — this is Tailwind CSS (or Tailwind-style) arbitrary selector/variant syntax applied to a utility. Explanation:
- py-1 — utility that sets vertical padding (padding-top and padding-bottom) to the spacing scale value
1. - [&>p]:inline — an arbitrary variant that targets direct child
elements of the element the utility is applied to; it applies the
inlineutility to those children.- & represents the parent selector (the element with the class).
- >p means “direct child p elements”.
- :inline is the utility being applied to that matched selector (equivalent to adding the
inlinedisplay utility to thosechildren).
Combined effect: on the element with classes py-1 [&>p]:inline, the element itself gets vertical padding = spacing. Its immediate
children are set to display: inline.
Browser/CSS output example (rough translation to plain CSS):
css
.element {padding-top: ; padding-bottom: ; }.element > p { display: inline;}Notes:
- This requires a build setup that supports Tailwind’s arbitrary variants (Tailwind v3+).
Leave a Reply