You’re referring to Tailwind CSS utility classes and a custom selector pattern. Here’s a concise explanation and example.
What it means
- list-inside: Positions list marker (bullet/number) inside the content box (marker participates in the line box).
- list-disc: Uses a filled circle (disc) as the list marker for unordered lists.
- whitespace-normal: Collapses whitespace and wraps text normally.
- [li&]:pl-6: A custom attribute selector using Tailwind’s arbitrary selector feature. It applies padding-left: 1.5rem (pl-6) to the element when the selector matches; specifically this targets elements matching the selector pattern li& (where & is the element placeholder). In practice this is commonly used to style child list items when using a wrapper class naming convention (e.g., li_mywrapper becomes a selector that targets li elements).
Example HTML/CSS (Tailwind)
First item with extra left padding Second item that wraps normally and aligns markers inside Notes
- The arbitrary selector syntax is written as [selector]:utility in Tailwind; replace licard with whatever custom token you’re using. The placeholder & stands for the generated selector, so [li&]:pl-6 matches an element whose class begins with li_ plus the element’s selector — commonly you put the same token on the element (see example).
Leave a Reply