twcss
Version:
Fast minimalist utility-first CSS runtime inspired by Tailwind and Twind
605 lines (603 loc) • 32.6 kB
JavaScript
import {
ANIM_TIME,
BRIGHTNESS_LEVELS,
COLUMNS,
CONTRAST_LEVELS,
DURATIONS,
HUE_ROTATE_DEGREES,
LINE_CLAMPS,
OPACITIES,
ORIGINS,
RADII,
ROTATE_DEGREES,
SATURATE_LEVELS,
SCALES,
SKEWS,
STROKE_WIDTHS,
WIDTHS,
Z_INDEXES,
BLEND_MODES,
} from './constants.js'
import { backdrop, gen, genc } from './generators.js'
// Tries to follow Tailwind's order.
export const UTILS = new Map([
// ---------------------------------------------------------------------------
// Layout - aspect-ratio
['@container', '{ container-type: inline-size }'],
['aspect-auto', '{ aspect-ratio: auto }'],
['aspect-square', '{ aspect-ratio: 1 / 1 }'],
['aspect-video', '{ aspect-ratio: 16 / 9 }'],
['aspect', '{ aspect-ratio: $ }'],
// Layout - columns
...gen(ii => [`columns-${ii}`, `columns: ${ii}`], [...COLUMNS, 'auto']),
// Layout - break-after
...gen(ii => [`break-after-${ii}`, `break-after: ${ii}`], ['auto', 'avoid', 'avoid-page', 'page', 'left', 'right', 'column']),
// Layout - break-before
...gen(ii => [`break-before-${ii}`, `break-after: ${ii}`], ['auto', 'avoid', 'avoid-page', 'page', 'left', 'right', 'column']),
// Layout - break-inside
...gen(ii => [`break-inside-${ii}`, `break-inside: ${ii}`], ['auto', 'avoid', 'avoid-page', 'avoid-column']),
// Layout - box-decoration-break
...gen(ii => [`box-decoration-${ii}`, `box-decoration-break: ${ii}`], ['clone', 'slice']),
// Layout - box-sizing
...gen(ii => [`box-${ii}`, `box-sizing: ${ii}-box`], ['border', 'content']),
// Layout - display
...gen(ii => [`${ii}`, `display: ${ii}`], ['inline', 'block', 'inline-block', 'flow-root', 'flex', 'inline-flex', 'grid', 'inline-grid', 'contents', 'table', 'inline-table', 'list-item']),
['hidden', '{ display: none }'],
['sr-only', '{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0 }'],
['not-sr-only', '{ position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal }'],
// Layout - float
...gen(ii => [`float-${ii}`, `float: inline-${ii}`], ['start', 'end']),
...gen(ii => [`float-${ii}`, `float: ${ii}`], ['left', 'right', 'none']),
// Layout - clear
...gen(ii => [`clear-${ii}`, `clear: inline-${ii}`], ['start', 'end']),
...gen(ii => [`clear-${ii}`, `clear: ${ii}`], ['left', 'right', 'both', 'none']),
// Layout - isolation
['isolate', '{ isolation: isolate }'],
['isolation-auto', '{ isolation: auto }'],
// Layout - object-fit
...gen(ii => [`object-${ii}`, `object-fit: ${ii}`], ['contain', 'cover', 'fill', 'none', 'scale-down']),
// Layout - object-position
...gen(ii => [`object-${ii.replace(/ /g, '-')}`, `object-position: ${ii}`], ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top']),
// Layout - overflow
...gen(ii => [`overflow-${ii}`, `overflow: ${ii}`], ['auto', 'hidden', 'clip', 'visible', 'scroll', 'visible']),
...gen(ii => [`overflow-x-${ii}`, `overflow-x: ${ii}`], ['auto', 'hidden', 'clip', 'visible', 'scroll', 'visible']),
...gen(ii => [`overflow-y-${ii}`, `overflow-y: ${ii}`], ['auto', 'hidden', 'clip', 'visible', 'scroll', 'visible']),
// Layout - overscroll-behavior
...gen(ii => [`overscroll-${ii}`, `overscroll-behavior: ${ii}`], ['auto', 'contain', 'none']),
...gen(ii => [`overscroll-x-${ii}`, `overscroll-behavior-x: ${ii}`], ['auto', 'contain', 'none']),
...gen(ii => [`overscroll-y-${ii}`, `overscroll-behavior-y: ${ii}`], ['auto', 'contain', 'none']),
// Layout - position
...gen(ii => [`${ii}`, `position: ${ii}`], ['static', 'fixed', 'absolute', 'relative', 'sticky']),
// Layout - top / right / bottom / left
['inset', '{ inset: $ }'],
['inset-x', '{ inset-inline: $ }'],
['inset-y', '{ inset-block: $ }'],
['start', '{ inset-inline-start: $ }'],
['end', '{ inset-inline-end: $ }'],
['top', '{ top: $ }'],
['right', '{ right: $ }'],
['bottom', '{ bottom: $ }'],
['left', '{ left: $ }'],
// Layout - visibility
['visible', '{ visibility: visible }'],
['invisible', '{ visibility: hidden }'],
['collapse', '{ visibility: collapse }'],
// Layout - z-index
...gen(ii => [`z-${ii}`, `z-index: ${ii}`], Z_INDEXES),
// ---------------------------------------------------------------------------
// Flexbox & Grid - flex-basis
['basis', '{ flex-basis: $ }'],
// Flexbox & Grid - flex-direction
['flex-row', '{ flex-direction: row }'],
['flex-row-reverse', '{ flex-direction: row-reverse }'],
['flex-col', '{ flex-direction: column }'],
['flex-col-reverse', '{ flex-direction: column-reverse }'],
// Flexbox & Grid - flex-wrap
...gen(ii => [`flex-${ii}`, `flex-wrap: ${ii}`], ['nowrap', 'wrap', 'wrap-reverse']),
// Flexbox & Grid - flex
['flex-1', '{ flex: 1 1 0% }'],
['flex-auto', '{ flex: 1 1 auto }'],
['flex-initial', '{ flex: 0 1 auto }'],
['flex-none', '{ flex: none }'],
// Flexbox & Grid - flex-grow
['grow', '{ flex-grow: 1 }'],
['grow-0', '{ flex-grow: 0 }'],
// Flexbox & Grid - flex-shrink
['shrink', '{ flex-shrink: 1 }'],
['shrink-0', '{ flex-shrink: 0 }'],
// Flexbox & Grid - order
...gen(ii => [`order-${ii}`, `columns: ${ii}`], COLUMNS),
['order-first', '{ order: -9999 }'],
['order-last', '{ order: 9999 }'],
['order-none', '{ order: 0 }'],
// Flexbox & Grid - grid-template-columns
...gen(ii => [`grid-cols-${ii}`, `grid-template-columns: repeat(${ii}, minmax(0, 1fr))`], COLUMNS),
['grid-cols-none', '{ grid-template-columns: none }'],
['grid-cols-subgrid', '{ grid-template-columns: subgrid }'],
// Flexbox & Grid - grid-column
['col-auto', '{ grid-column: auto }'],
...gen(ii => [`col-span-${ii}`, `grid-column: span ${ii} / span ${ii}`], COLUMNS),
['col-span-full', '{ grid-column: 1 / -1 }'],
...gen(ii => [`col-start-${ii}`, `grid-column-start: ${ii}`], [...COLUMNS, 13, 'auto']),
// Flexbox & Grid - grid-template-rows
...gen(ii => [`grid-rows-${ii}`, `grid-template-rows: repeat(${ii}, auto)`], COLUMNS),
['grid-rows-none', '{ grid-template-rows: none }'],
['grid-rows-subgrid', '{ grid-template-rows: subgrid }'],
// Flexbox & Grid - grid-row
['row-auto', '{ grid-row: auto }'],
...gen(ii => [`row-span-${ii}`, `grid-row: span ${ii} / span ${ii}`], COLUMNS),
['row-span-full', '{ grid-row: 1 / -1 }'],
...gen(ii => [`row-start-${ii}`, `grid-row-start: ${ii}`], [...COLUMNS, 13, 'auto']),
// Flexbox & Grid - grid-auto-flow
['grid-flow-row', '{ grid-auto-flow: row }'],
['grid-flow-col', '{ grid-auto-flow: column }'],
['grid-flow-dense', '{ grid-auto-flow: dense }'],
['grid-flow-row-dense', '{ grid-auto-flow: row dense }'],
['grid-flow-col-dense', '{ grid-auto-flow: column dense }'],
// Flexbox & Grid - grid-auto-columns
['auto-cols-auto', '{ grid-auto-columns: auto }'],
['auto-cols-min', '{ grid-auto-columns: min-content }'],
['auto-cols-max', '{ grid-auto-columns: max-content }'],
['auto-cols-fr', '{ grid-auto-columns: minmax(0, 1fr) }'],
// Flexbox & Grid - grid-auto-rows
['auto-rows-auto', '{ grid-auto-rows: auto }'],
['auto-rows-min', '{ grid-auto-rows: min-content }'],
['auto-rows-max', '{ grid-auto-rows: max-content }'],
['auto-rows-fr', '{ grid-auto-rows: minmax(0, 1fr) }'],
// Flexbox & Grid - gap
['gap', '{ gap: $ }'],
['gap-x', '{ column-gap: $ }'],
['gap-y', '{ row-gap: $ }'],
// Flexbox & Grid - justify-content
['justify-start', '{ justify-content: flex-start }'],
['justify-end', '{ justify-content: flex-end }'],
['justify-center', '{ justify-content: center }'],
['justify-between', '{ justify-content: space-between }'],
['justify-around', '{ justify-content: space-around }'],
['justify-evenly', '{ justify-content: space-evenly }'],
['justify-stretch', '{ justify-content: stretch }'],
['justify-normal', '{ justify-content: normal }'],
// Flexbox & Grid - justify-items
...gen(ii => [`justify-items-${ii}`, `justify-items: ${ii}`], ['start', 'end', 'center', 'stretch', 'normal']),
// Flexbox & Grid - justify-self
...gen(ii => [`justify-self-${ii}`, `justify-self: ${ii}`], ['auto', 'start', 'end', 'center', 'stretch']),
// Flexbox & Grid - align-content
['content-normal', '{ align-content: normal }'],
['content-center', '{ align-content: center }'],
['content-start', '{ align-content: flex-start }'],
['content-end', '{ align-content: flex-end }'],
['content-between', '{ align-content: space-between }'],
['content-around', '{ align-content: space-around }'],
['content-evenly', '{ align-content: space-evenly }'],
['content-baseline', '{ align-content: baseline }'],
['content-stretch', '{ align-content: stretch }'],
// Flexbox & Grid - align-items
['items-start', '{ align-items: flex-start }'],
['items-end', '{ align-items: flex-end }'],
['items-center', '{ align-items: center }'],
['items-baseline', '{ align-items: baseline }'],
['items-stretch', '{ align-items: stretch }'],
// Flexbox & Grid - align-self
['self-auto', '{ align-self: auto }'],
['self-start', '{ align-self: flex-start }'],
['self-end', '{ align-self: flex-end }'],
['self-center', '{ align-self: center }'],
['self-stretch', '{ align-self: stretch }'],
['self-baseline', '{ align-self: baseline }'],
// Flexbox & Grid - place-content
['place-content-center', '{ place-content: center }'],
['place-content-start', '{ place-content: flex-start }'],
['place-content-end', '{ place-content: flex-end }'],
['place-content-between', '{ place-content: space-between }'],
['place-content-around', '{ place-content: space-around }'],
['place-content-evenly', '{ place-content: space-evenly }'],
['place-content-baseline', '{ place-content: baseline }'],
['place-content-stretch', '{ place-content: stretch }'],
// Flexbox & Grid - place-items
...gen(ii => [`place-items-${ii}`, `place-items: ${ii}`], ['start', 'end', 'center', 'baseline', 'stretch']),
// Flexbox & Grid - place-self
...gen(ii => [`place-self-${ii}`, `place-self: ${ii}`], ['auto', 'start', 'end', 'center', 'stretch']),
// ---------------------------------------------------------------------------
// Spacing - padding
['p', '{ padding: $ }'],
['px', '{ padding-inline: $ }'],
['py', '{ padding-block: $ }'],
['pt', '{ padding-top: $ }'],
['pr', '{ padding-right: $ }'],
['pb', '{ padding-bottom: $ }'],
['pl', '{ padding-left: $ }'],
['ps', '{ padding-inline-start: $ }'],
['pe', '{ padding-inline-end: $ }'],
// Spacing - margin
['m', '{ margin: $ }'],
['mx', '{ margin-inline: $ }'],
['my', '{ margin-block: $ }'],
['mt', '{ margin-top: $ }'],
['mr', '{ margin-right: $ }'],
['mb', '{ margin-bottom: $ }'],
['ml', '{ margin-left: $ }'],
['ms', '{ margin-inline-start: $ }'],
['me', '{ margin-inline-end: $ }'],
['space-x', ' > :not(:last-child) { margin-inline-end: $ }'],
['space-y', ' > :not(:last-child) { margin-bottom: $ }'],
// Sizing - width
['w', '{ width: $ }'],
// Sizing - min-width
['min-w', '{ min-width: $ }'],
// Sizing - max-width
['max-w', '{ max-width: $ }'],
// Sizing - height
['h', '{ height: $ }'],
// Sizing - min-height
['min-h', '{ min-height: $ }'],
// Sizing - max-height
['max-h', '{ max-height: $ }'],
// ---------------------------------------------------------------------------
// Typography - font-family
['font-sans', '{ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" }'],
['font-serif', '{ font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif }'],
['font-mono', '{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace }'],
// Typography - font-size
['text-xs', '{ font-size: 12px; line-height: 1.333 }'],
['text-sm', '{ font-size: 14px; line-height: 1.429 }'],
['text-base', '{ font-size: 16px; line-height: 1.5 }'],
['text-lg', '{ font-size: 18px; line-height: 1.555 }'],
['text-xl', '{ font-size: 20px; line-height: 1.4 }'],
['text-2xl', '{ font-size: 24px; line-height: 1.333 }'],
['text-3xl', '{ font-size: 30px; line-height: 1.2 }'],
['text-4xl', '{ font-size: 36px; line-height: 1.111 }'],
['text-5xl', '{ font-size: 48px; line-height: 1 }'],
['text-6xl', '{ font-size: 60px; line-height: 1 }'],
['text-7xl', '{ font-size: 72px; line-height: 1 }'],
['text-8xl', '{ font-size: 96px; line-height: 1 }'],
['text-9xl', '{ font-size: 128px; line-height: 1 }'],
// Typography - font-smoothing
['antialiased', '{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }'],
['subpixel-antialiased', '{ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto }'],
// Typography - font-style
['italic', '{ font-style: italic }'],
['not-italic', '{ font-style: normal }'],
// Typography - font-weight
['font-thin', '{ font-weight: 100 }'],
['font-extralight', '{ font-weight: 200 }'],
['font-light', '{ font-weight: 300 }'],
['font-normal', '{ font-weight: 400 }'],
['font-medium', '{ font-weight: 500 }'],
['font-semibold', '{ font-weight: 600 }'],
['font-bold', '{ font-weight: 700 }'],
['font-extrabold', '{ font-weight: 800 }'],
['font-black', '{ font-weight: 900 }'],
// Tpyography - font-stretch
...gen(ii => [`font-stretch-${ii}`, `font-stretch: ${ii}`], ['ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded']),
// Typography - font-variant-numeric
['normal-nums', '{ font-variant-numeric: normal }'],
...gen(ii => [ii, `font-variant-numeric: ${ii}`], ['ordinal', 'slashed-zero', 'lining-nums', 'oldstyle-nums', 'proportional-nums', 'tabular-nums', 'diagonal-fractions', 'stacked-fractions']),
// Typography - letter-spacing
['tracking-tighter', '{ letter-spacing: -0.05em }'],
['tracking-tight', '{ letter-spacing: -0.025em }'],
['tracking-normal', '{ letter-spacing: 0 }'],
['tracking-wide', '{ letter-spacing: 0.025em }'],
['tracking-wider', '{ letter-spacing: 0.05em }'],
['tracking-widest', '{ letter-spacing: 0.1em }'],
// Typography - line-clamp
...gen(ii => [`line-clamp-${ii}`, `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${ii}`], LINE_CLAMPS),
// Typography - line-height
['leading-none', '{ line-height: 1 }'],
['leading-tight', '{ line-height: 1.25 }'],
['leading-snug', '{ line-height: 1.375 }'],
['leading-normal', '{ line-height: 1.5 }'],
['leading-relaxed', '{ line-height: 1.625 }'],
['leading-loose', '{ line-height: 2 }'],
// Typography - list-style
['list-image-none', '{ list-style-image: none }'],
['list-inside', '{ list-style-position: inside }'],
['list-outside', '{ list-style-position: outside }'],
['list-disc', '{ list-style-type: disc }'],
['list-decimal', '{ list-style-type: decimal }'],
['list-none', '{ list-style-type: none }'],
// Typography - text-align
...gen(ii => [`text-${ii}`, `text-align: ${ii}`], ['left', 'center', 'right', 'justify', 'start', 'end']),
// Typography - text-color
...genc('text', 'color'),
// Typography - text-decoration-line
...gen(ii => [ii, `text-decoration-line: ${ii}`], ['underline', 'overline', 'line-through']),
['no-underline', '{ text-decoration-line: none }'],
// Typography - text-decoration-color
...genc('decoration', 'text-decoration-color'),
// Typography = text-decoration-style
...gen(ii => [`decoration-${ii}`, `text-decoration-style: ${ii}`], ['solid', 'double', 'dotted', 'dashed', 'wavy']),
// Typography - text-decoration-thickness
['decoration-auto', '{ text-decoration-thickness: auto }'],
['decoration-from-font', '{ text-decoration-thickness: from-font }'],
...gen(ii => [`decoration-${ii}`, `text-decoration-thickness: ${ii}px`], WIDTHS),
// Typography - text-underline-offset
['underline-offset-auto', '{ text-underline-offset: auto }'],
...gen(ii => [`underline-offset-${ii}`, `text-underline-offset: ${ii}px`], WIDTHS),
// Typography - text-transform
...gen(ii => [`${ii}`, `text-transform: ${ii}`], ['uppercase', 'lowercase', 'capitalize']),
['normal-case', '{ text-transform: none }'],
// Typography - text-overflow
['truncate', '{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap }'],
['overflow-ellipsis', '{ text-overflow: ellipsis }'],
['overflow-clip', '{ text-overflow: clip }'],
// Typography - text-wrap
...gen(ii => [`text-${ii}`, `text-wrap: ${ii}`], ['wrap', 'nowrap', 'balance', 'pretty']),
// Typography - text-indent
['indent', '{ text-indent: $ }'],
// Typography - vertical-align
...gen(ii => [`align-${ii}`, `vertical-align: ${ii}`], ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super']),
// Typography - white-space
...gen(ii => [`whitespace-${ii}`, `white-space: ${ii}`], ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']),
// Typography - word-break
['break-normal', '{ overflow-wrap: normal; word-break: normal }'],
['break-words', '{ overflow-wrap: break-word }'],
['break-all', '{ word-break: break-all }'],
['break-keep', '{ word-break: keep-all }'],
// Typography - hyphens
...gen(ii => [`hyphens-${ii}`, `hyphens: ${ii}`], ['none', 'manual', 'auto']),
// Typography - content
['content', '{ content: $ }'],
['content', '{ content: $ }'],
// ---------------------------------------------------------------------------
// Backgrounds - background-attachment
...gen(ii => [`bg-${ii}`, `background-attachment: ${ii}`], ['fixed', 'local', 'scroll']),
// Backgrounds - background-clip
...gen(ii => [`bg-clip-${ii}`, `background-clip: ${ii}-box`], ['border', 'padding', 'content']),
['bg-clip-text', '{ background-clip: text }'],
// Backgrounds - background-color'
...genc('bg', 'background-color'),
// Backgrounds - background-image
['bg', '{ background-image: $ }'],
['bg-none', '{ background-image: none }'],
// Backgrounds - background-origin
...gen(ii => [`bg-${ii}`, `background-origin: ${ii}`], ['border-box', 'padding-box', 'content-box']),
// Backgrounds - background-position
...gen(ii => [`bg-${ii.replace(' ', '-')}`, `background-position: ${ii}`], ['bottom', 'center', 'left', 'left bottom', 'left top', 'right', 'right bottom', 'right top', 'top']),
// Backgrounds - background-repeat
...gen(ii => [`bg-${ii}`, `background-repeat: ${ii}`], ['repeat', 'repeat-x', 'repeat-y', 'space', 'round', 'no-repeat']),
// Backgrounds - background-size
...gen(ii => [`bg-${ii}`, `background-size: ${ii}`], ['auto', 'cover', 'contain']),
// // ---------------------------------------------------------------------------
// Borders - border-radius
...gen(([name, value]) => [`rounded${name}`, `border-radius: ${value}`], RADII),
...gen(([name, value]) => [`rounded-tl${name}`, `border-top-left-radius: ${value}`], RADII),
...gen(([name, value]) => [`rounded-tr${name}`, `border-top-right-radius: ${value}`], RADII),
...gen(([name, value]) => [`rounded-bl${name}`, `border-bottom-left-radius: ${value}`], RADII),
...gen(([name, value]) => [`rounded-br${name}`, `border-bottom-right-radius: ${value}`], RADII),
// Borders - border-width
...gen(ii => [`border-${ii}`, `border-width: ${ii}px`], WIDTHS),
...gen(ii => [`border-t-${ii}`, `border-top-width: ${ii}px`], WIDTHS),
...gen(ii => [`border-b-${ii}`, `border-bottom-width: ${ii}px`], WIDTHS),
...gen(ii => [`border-l-${ii}`, `border-left-width: ${ii}px`], WIDTHS),
...gen(ii => [`border-r-${ii}`, `border-right-width: ${ii}px`], WIDTHS),
...gen(ii => [`border-s-${ii}`, `border-inline-start-width: ${ii}px`], WIDTHS),
...gen(ii => [`border-e-${ii}`, `border-inline-end-width: ${ii}px`], WIDTHS),
['border', '{ border-width: 1px }'],
['border-t', '{ border-top-width: 1px }'],
['border-b', '{ border-bottom-width: 1px }'],
['border-l', '{ border-left-width: 1px }'],
['border-r', '{ border-right-width: 1px }'],
['border-s', '{ border-inline-start-width: 1px }'],
['border-e', '{ border-inline-end-width: 1px }'],
// Borders - border-color
...genc('border', 'border-color'),
// Borders - Border-style
...gen(ii => [`border-${ii}`, `border-style: ${ii}`], ['solid', 'dashed', 'dotted', 'double', 'hidden', 'none']),
// Borders - outline-width
...gen(ii => [`outline-${ii}`, `outline-width: ${ii}px`], WIDTHS),
// Borders - outline-color
...genc('outline', 'outline-color'),
// Borders - outline-style
['outline', '{ outline-style: solid }'],
...gen(ii => [`outline-${ii}`, `outline-style: ${ii}`], ['none', 'dashed', 'dotted', 'double']),
// Borders - outline-offset
...gen(ii => [`outline-offset-${ii}`, `outline-offset: ${ii}px`], WIDTHS),
// ---------------------------------------------------------------------------
// Effects - box-shadow
['shadow', '{ box-shadow: 0 1px rgb(0 0 0 / 0.05) }'], // Customised.
['shadow-2xs', '{ box-shadow: 0 1px rgb(0 0 0 / 0.05) }'],
['shadow-xs', '{ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) }'],
['shadow-sm', '{ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) }'],
['shadow-md', '{ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) }'],
['shadow-lg', '{ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) }'],
['shadow-xl', '{ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) }'],
['shadow-2xl', '{ box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25) }'],
['shadow-none', '{ box-shadow: 0 0 rgb(0 0 0 / 0) }'],
// Effects - opacity
...gen(ii => [`opacity-${ii}`, `opacity: ${ii / 100}`], OPACITIES),
// Effects - mix-blend-mode
...gen(ii => [`mix-blend-${ii}`, `mix-blend-mode: ${ii}`], BLEND_MODES),
// Effects - background-blend-mode
...gen(ii => [`bg-blend-${ii}`, `background-blend-mode: ${ii}`], BLEND_MODES),
// ---------------------------------------------------------------------------
// Filters - blur
...backdrop(['blur-xs', '{ filter: blur(4px) }']),
...backdrop(['blur-sm', '{ filter: blur(8px) }']),
...backdrop(['blur-md', '{ filter: blur(12px) }']),
...backdrop(['blur-lg', '{ filter: blur(16px) }']),
...backdrop(['blur-xl', '{ filter: blur(24px) }']),
...backdrop(['blur-2xl', '{ filter: blur(40px) }']),
...backdrop(['blur-3xl', '{ filter: blur(64px) }']),
...backdrop(['blur-none', '{ filter: none }']),
// Filters - brightness
...backdrop(gen(ii => [`brightness-${ii}`, `filter: brightness(${ii}%)`], BRIGHTNESS_LEVELS)),
// Filters - contrast
...backdrop(gen(ii => [`contrast-${ii}`, `filter: contrast(${ii}%)`], CONTRAST_LEVELS)),
// Filters - drop-shadow
['drop-shadow-xs', '{ filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)) }'],
['drop-shadow-sm', '{ filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.15)) }'],
['drop-shadow-md', '{ filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.12)) }'],
['drop-shadow-lg', '{ filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.15)) }'],
['drop-shadow-xl', '{ filter: drop-shadow(0 9px 7px rgb(0 0 0 / 0.1)) }'],
['drop-shadow-2xl', '{ filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15)) }'],
['drop-shadow-none', '{ filter: drop-shadow(0 0 rgba(0, 0, 0, 0)) }'],
// Filters - grayscale
...backdrop(['grayscale', '{ filter: grayscale(100%) }']),
...backdrop(['grayscale-0', '{ filter: grayscale(0) }']),
// Filters - hue-rotate
...backdrop(gen(ii => [`hue-rotate-${ii}`, `filter: hue-rotate(${ii}deg)`], HUE_ROTATE_DEGREES)),
...backdrop(gen(ii => [`-hue-rotate-${ii}`, `filter: hue-rotate(-${ii}deg)`], HUE_ROTATE_DEGREES)),
// Filters - invert
...backdrop(['invert', '{ filter: invert(100%) }']),
...backdrop(['invert-0', '{ filter: invert(0) }']),
// Filters - opacity
...gen(ii => [`backdrop-opacity-${ii}`, `backdrop-filter: opacity(${ii / 100})`], OPACITIES),
// Filters - saturate
...gen(ii => [`saturate-${ii}`, `filter: saturate(${ii}%)`], SATURATE_LEVELS),
// Filters - sepia
...backdrop(['invert', '{ filter: sepia(100%) }']),
...backdrop(['invert-0', '{ filter: sepia(0) }']),
// Filters
...backdrop(['filter-none', '{ filter: none }']),
// ---------------------------------------------------------------------------
// Tables - border-collapse
['border-collapse', '{ border-collapse: collapse }'],
['border-separate', '{ border-collapse: separate }'],
// Tables - border-spacing
['border-spacing', '{ border-spacing: $ }'],
// Tables - table-layout
['table-auto', '{ table-layout: auto }'],
['table-fixed', '{ table-layout: fixed }'],
// Tables - caption-side
['caption-top', '{ caption-side: top }'],
['caption-bottom', '{ caption-side: bottom }'],
// ---------------------------------------------------------------------------
// Transitions & Animations - transition-property
['transition', `{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: ${ANIM_TIME} }`],
['transition-all', `{ transition-property: all; transition-duration: ${ANIM_TIME} }`],
['transition-colors', `{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: ${ANIM_TIME} }`],
['transition-opacity', `{ transition-property: opacity; transition-duration: ${ANIM_TIME} }`],
['transition-shadow', `{ transition-property: box-shadow; transition-duration: ${ANIM_TIME} }`],
['transition-transform', `{ transition-property: transform; transition-duration: ${ANIM_TIME} }`],
['transition-none', '{ transition-property: none }'],
// Transitions & Animations - transition-behavior
['transition-normal', '{ transition-behavior: normal }'],
['transition-discrete', '{ transition-behavior: allow-discrete }'],
// Transitions & Animations - transition-duration
['duration-initial', '{ transition-duration: initial }'],
...gen(ii => [`duration-${ii}`, `transition-duration: ${ii}ms`], DURATIONS),
// Transitions & Animations - transition-timing-function
['ease-linear', '{ transition-timing-function: linear }'],
['ease-in', '{ transition-timing-function: ease-in }'],
['ease-out', '{ transition-timing-function: ease-out }'],
['ease-in-out', '{ transition-timing-function: ease-in-out }'],
['ease-initial', '{ transition-timing-function: initial }'],
// Transitions & Animations - transition-delay
...gen(ii => [`delay-${ii}`, `transition-delay: ${ii}ms`], DURATIONS),
// Transitions & Animations - animation
['animate-expand', `{ animation: expand ${ANIM_TIME} ease-in-out }`],
['animate-toast', `{ animation: toast ${ANIM_TIME} ease-in-out }`],
['animate-fade', `{ animation: fade ${ANIM_TIME} ease-in-out }`],
['animate-none', '{ animation: none }'],
// ---------------------------------------------------------------------------
// Transforms - blackface-visibility
['blackface-visible', '{ backface-visibility: visible }'],
['blackface-hidden', '{ backface-visibility: hidden }'],
// Transforms - perspective
['perspective-dramatic', '{ perspective: 100px }'],
['perspective-near', '{ perspective: 300px }'],
['perspective-normal', '{ perspective: 500px }'],
['perspective-midrange', '{ perspective: 800px }'],
['perspective-distant', '{ perspective: 1200px }'],
['perspective-none', '{ perspective: none }'],
// Transforms - perspective-origin
...gen(ii => [`perspective-origin-${ii}`, `perspective-origin: ${ii.replace('-', ' ')}`], ORIGINS),
// Transforms - rotate
...gen(ii => [`rotate-${ii}`, `rotate: ${ii}deg`], ROTATE_DEGREES),
...gen(ii => [`-rotate-${ii}`, `rotate: -${ii}deg`], ROTATE_DEGREES),
// Transforms - scale
...gen(ii => [`scale-${ii}`, `transform: scale(${ii / 100})`], SCALES),
...gen(ii => [`scale-x-${ii}`, `transform: scaleX(${ii / 100})`], SCALES),
...gen(ii => [`scale-y-${ii}`, `transform: scaleY(${ii / 100})`], SCALES),
// Transforms - skew
...gen(ii => [`skew-x-${ii}`, `transform: skewX(${ii}deg)`], SKEWS),
...gen(ii => [`skew-y-${ii}`, `transform: skewY(${ii}deg)`], SKEWS),
// Transforms - transform-origin
...gen(ii => [`origin-${ii}`, `transform-origin: ${ii.replace('-', ' ')}`], ORIGINS),
// Transforms - transform-style
['transform-3d', '{ transform-style: preserve-3d }'],
['transform-flat', '{ transform-style: flat }'],
// Transforms - translate
['translate-x', '{ transform: translateX($) }'],
['translate-y', '{ transform: translateY($) }'],
// ---------------------------------------------------------------------------
// Interactivity - accent-color
...genc('accent', 'accent-color'),
// Interactivity - appearance
['appearance-none', '{ appearance: none }'],
['appearance-auto', '{ appearance: auto }'],
// Interactivity - caret-color
...genc('caret', 'caret-color'),
// Interactivity - color-scheme
...gen(ii => [`scheme-${ii.replace(' ', '-')}`, `color-scheme: ${ii}`], ['normal', 'dark', 'light', 'light dark', 'only dark', 'only light']),
// Interactivity - cursor
...gen(ii => [`cursor-${ii}`, `cursor: ${ii}`], ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'not-allowed']),
// Interactivity - field-sizing
['field-sizing-fixed', '{ field-sizing: fixed }'],
['field-sizing-content', '{ field-sizing: content }'],
// Interactivity - pointer-events
['pointer-events-none', '{ pointer-events: none }'],
['pointer-events-auto', '{ pointer-events: auto }'],
// Interactivity - resize
['resize-none', '{ resize: none }'],
['resize-x', '{ resize: horizontal }'],
['resize-y', '{ resize: vertical }'],
['resize-both', '{ resize: both }'],
// Interactivity - scroll-behavior
['scroll-auto', '{ scroll-behavior: auto }'],
['scroll-smooth', '{ scroll-behavior: smooth }'],
// Interactivity - scroll-margin
['scroll-m', '{ scroll-margin: $ }'],
['scroll-mx', '{ scroll-margin-inline: $ }'],
['scroll-my', '{ scroll-margin-block: $ }'],
['scroll-ms', '{ scroll-margin-inline-start: $ }'],
['scroll-me', '{ scroll-margin-inline-end: $ }'],
['scroll-mt', '{ scroll-margin-top: $ }'],
['scroll-mr', '{ scroll-margin-right: $ }'],
['scroll-mb', '{ scroll-margin-bottom: $ }'],
['scroll-ml', '{ scroll-margin-left: $ }'],
// Interactivity - scroll-padding
['scroll-p', '{ scroll-padding: $ }'],
['scroll-px', '{ scroll-padding-inline: $ }'],
['scroll-py', '{ scroll-padding-block: $ }'],
['scroll-ps', '{ scroll-padding-inline-start: $ }'],
['scroll-pe', '{ scroll-padding-inline-end: $ }'],
['scroll-pt', '{ scroll-padding-top: $ }'],
['scroll-pr', '{ scroll-padding-right: $ }'],
['scroll-pb', '{ scroll-padding-bottom: $ }'],
['scroll-pl', '{ scroll-padding-left: $ }'],
// Interactivity - scroll-snap-align
...gen(ii => [`snap-${ii}`, `scroll-snap-align: ${ii}`], ['start', 'end', 'center']),
['snap-align-none', '{ scroll-snap-align: none }'],
// Interactivity - scroll-snap-stop
['snap-stop-normal', '{ scroll-snap-stop: normal }'],
['snap-stop-always', '{ scroll-snap-stop: always }'],
// Interactivity - scroll-snap-type
['snap-none', '{ scroll-snap-type: none }'],
['snap-x', '{ scroll-snap-type: x mandatory }'],
['snap-y', '{ scroll-snap-type: y proximity }'],
['snap-both', '{ scroll-snap-type: both proximity }'],
// Interactivity - touch-action
...gen(ii => [`touch-${ii}`, `touch-action: ${ii}`], ['auto', 'none', 'pan-x', 'pan-left', 'pan-right', 'pan-y', 'pan-up', 'pan-down', 'pinch-zoom', 'manipulation']),
// Interactivity - user-select
['select-none', '{ user-select: none }'],
['select-text', '{ user-select: text }'],
['select-all', '{ user-select: all }'],
['select-auto', '{ user-select: auto }'],
// Interactivity - will-change
['will-change-auto', '{ will-change: auto }'],
['will-change-scroll', '{ will-change: scroll-position }'],
['will-change-contents', '{ will-change: contents }'],
['will-change-transform', '{ will-change: transform }'],
// ---------------------------------------------------------------------------
// SVG - fill
...genc('fill', 'fill'),
// SVG - stroke
...genc('stroke', 'stroke'),
// SVG - stroke-width
...gen(ii => [`stroke-${ii}`, `stroke-width: ${ii}`], STROKE_WIDTHS),
// ---------------------------------------------------------------------------
// Accessibility - forced-color-adjust
['forced-color-adjust-auto', '{ forced-color-adjust: auto }'],
['forced-color-adjust-none', '{ forced-color-adjust: none }'],
])