List classes
Bullet, numbered, check and custom-marker list classes.
| Class | Styles |
|---|---|
list-bullet | :is(.list-bullet > li, .list-number > li, .list-check > li) { list-style: none; position: relative; padding-left: calc(var(--list-space-x) + var(--list-marker-size)); margin-block: var(--list-gap-y); }:is(.list-bullet > li :first-child, .list-number > li :first-child, .list-check > li :first-child) { margin-top: 0; }:is(.list-bullet > li :last-child, .list-number > li :last-child, .list-check > li :last-child) { margin-bottom: 0; }+ 4 more rules |
list-number | :is(.list-bullet > li, .list-number > li, .list-check > li) { list-style: none; position: relative; padding-left: calc(var(--list-space-x) + var(--list-marker-size)); margin-block: var(--list-gap-y); }:is(.list-bullet > li :first-child, .list-number > li :first-child, .list-check > li :first-child) { margin-top: 0; }:is(.list-bullet > li :last-child, .list-number > li :last-child, .list-check > li :last-child) { margin-bottom: 0; }+ 7 more rules |
list-check | :is(.list-bullet > li, .list-number > li, .list-check > li) { list-style: none; position: relative; padding-left: calc(var(--list-space-x) + var(--list-marker-size)); margin-block: var(--list-gap-y); }:is(.list-bullet > li :first-child, .list-number > li :first-child, .list-check > li :first-child) { margin-top: 0; }:is(.list-bullet > li :last-child, .list-number > li :last-child, .list-check > li :last-child) { margin-bottom: 0; }+ 7 more rules |
is-checked | :is(.list-check > .is-checked)::before { mask-image: url("data:image/svg+xml,…"); } |
list-custom | & { display: grid; align-items: start; grid-template-columns: auto 1fr; column-gap: var(--list-space-x); row-gap: var(--list-gap-y); }:is(.list-custom > li:has( > :is(ul, ol))):before { --tw-content: none; } |
list-custom-entry | display: contents; |
list-custom-entry-marker | grid-column-start: 1;width: var(--list-marker-size);height: var(--list-marker-size);display: inline-grid;place-items: center;font-size: var(--list-icon-size);line-height: 1;color: var(--color-list-marker); |
list-entry-custom-marker | :is(.list-entry-custom-marker > *) { width: 100%; height: 100%; }:is(.list-entry-custom-marker > img, .list-entry-custom-marker > svg) { object-fit: contain; object-position: center; } |
list-entry-custom-content | grid-column-start: 2; |