You’re referring to Tailwind CSS utilities and a custom selector/configuration. Here’s what each part means and how to use it:
- list-inside: Places list markers (bullets/numbers) inside the content box so they appear within the text flow instead of hanging in the margin.
- list-disc: Uses filled circle bullets for unordered lists.
- whitespace-normal: Collapses whitespace and wraps text normally (default white-space behavior).
- [li&]:pl-6: A custom arbitrary variant selector targeting li elements where the current selector (&) is nested—this applies padding-left: 1.5rem (pl-6) to the matching li. In practice this targets child li elements of the component when compiled to CSS.
Example usage in HTML (Tailwind JIT / arbitrary variant support required):
&]:pl-6”>
First item with normal wrapping and extra left padding Second item Notes:
- The arbitrary variant syntax [selector]:utility lets you scope utilities using custom selectors; ensure your Tailwind config allows arbitrary variants (JIT mode in v2.2+ / built-in in v3+).
Leave a Reply