UNPKG

twcss

Version:

Fast minimalist utility-first CSS runtime inspired by Tailwind and Twind

605 lines (603 loc) 32.6 kB
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 }'], ])