diff --git a/src/lib/default-config.ts b/src/lib/default-config.ts index da8a197..7921e50 100644 --- a/src/lib/default-config.ts +++ b/src/lib/default-config.ts @@ -1,5 +1,5 @@ import { fromTheme } from './from-theme' -import { Config, DefaultClassGroupIds, DefaultThemeGroupIds } from './types' +import { ClassGroup, Config, DefaultClassGroupIds, DefaultThemeGroupIds } from './types' import { isAny, isAnyNonArbitrary, @@ -25,128 +25,157 @@ import { } from './validators' export const getDefaultConfig = () => { - // Theme getters for theme variable namespaces: https://tailwindcss.com/docs/theme#theme-variable-namespaces + /** + * Theme getters for theme variable namespaces + * @see https://tailwindcss.com/docs/theme#theme-variable-namespaces + */ + const theme = { + color: fromTheme('color'), + font: fromTheme('font'), + text: fromTheme('text'), + fontWeight: fromTheme('font-weight'), + tracking: fromTheme('tracking'), + leading: fromTheme('leading'), + breakpoint: fromTheme('breakpoint'), + container: fromTheme('container'), + spacing: fromTheme('spacing'), + radius: fromTheme('radius'), + shadow: fromTheme('shadow'), + insetShadow: fromTheme('inset-shadow'), + dropShadow: fromTheme('drop-shadow'), + blur: fromTheme('blur'), + perspective: fromTheme('perspective'), + aspect: fromTheme('aspect'), + ease: fromTheme('ease'), + animate: fromTheme('animate'), + } satisfies Record> - const color = fromTheme('color') - const font = fromTheme('font') - const text = fromTheme('text') - const fontWeight = fromTheme('font-weight') - const tracking = fromTheme('tracking') - const leading = fromTheme('leading') - const breakpoint = fromTheme('breakpoint') - const container = fromTheme('container') - const spacing = fromTheme('spacing') - const radius = fromTheme('radius') - const shadow = fromTheme('shadow') - const insetShadow = fromTheme('inset-shadow') - const dropShadow = fromTheme('drop-shadow') - const blur = fromTheme('blur') - const perspective = fromTheme('perspective') - const aspect = fromTheme('aspect') - const ease = fromTheme('ease') - const animate = fromTheme('animate') - - // Helpers to avoid repeating the same values - - const getBreakScale = () => - ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const - const getPositionScale = () => - [ - 'bottom', - 'center', - 'left', - 'left-bottom', - 'left-top', - 'right', - 'right-bottom', - 'right-top', - 'top', - ] as const - const getOverflowScale = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const - const getOverscrollScale = () => ['auto', 'contain', 'none'] as const - const getInsetScale = () => - [isFraction, 'px', 'full', 'auto', isArbitraryVariable, isArbitraryValue, spacing] as const - const getGridTemplateColsRowsScale = () => - [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue] as const - const getGridColRowStartAndEndScale = () => - [ - 'auto', - { span: ['full', isInteger, isArbitraryVariable, isArbitraryValue] }, - isArbitraryVariable, - isArbitraryValue, - ] as const - const getGridColRowStartOrEndScale = () => - [isInteger, 'auto', isArbitraryVariable, isArbitraryValue] as const - const getGridAutoColsRowsScale = () => - ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue] as const - const getGapScale = () => [isArbitraryVariable, isArbitraryValue, spacing] as const - const getAlignPrimaryAxisScale = () => - ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline'] as const - const getAlignSecondaryAxisScale = () => ['start', 'end', 'center', 'stretch'] as const - const getUnambiguousSpacingScale = () => - [isArbitraryVariable, isArbitraryValue, spacing] as const - const getMarginScale = () => ['auto', ...getUnambiguousSpacingScale()] as const - const getSizingScale = () => - [ - isFraction, - 'auto', - 'px', - 'full', - 'dvw', - 'dvh', - 'lvw', - 'lvh', - 'svw', - 'svh', - 'min', - 'max', - 'fit', - isArbitraryVariable, - isArbitraryValue, - spacing, - ] as const - const getGradientStopPositionScale = () => [isPercent, isArbitraryLength] as const - const getBorderWidthScale = () => - ['', isNumber, isArbitraryVariableLength, isArbitraryLength] as const - const getLineStyleScale = () => ['solid', 'dashed', 'dotted', 'double'] as const - const getBlendModeScale = () => - [ - 'normal', - 'multiply', - 'screen', - 'overlay', - 'darken', - 'lighten', - 'color-dodge', - 'color-burn', - 'hard-light', - 'soft-light', - 'difference', - 'exclusion', - 'hue', - 'saturation', - 'color', - 'luminosity', - ] as const - const getOriginScale = () => - [ - 'center', - 'top', - 'top-right', - 'right', - 'bottom-right', - 'bottom', - 'bottom-left', - 'left', - 'top-left', - isArbitraryVariable, - isArbitraryValue, - ] as const - const getRotateScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue] as const - const getScaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue] as const - const getSkewScale = () => [isNumber, isArbitraryVariable, isArbitraryValue] as const - const getTranslateScale = () => - [isFraction, 'full', 'px', isArbitraryVariable, isArbitraryValue, spacing] as const + /** + * Helpers to avoid repeating the same scales + */ + const scale = { + break: () => + ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const, + position: () => + [ + 'bottom', + 'center', + 'left', + 'left-bottom', + 'left-top', + 'right', + 'right-bottom', + 'right-top', + 'top', + ] as const, + overflow: () => ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const, + overscroll: () => ['auto', 'contain', 'none'] as const, + inset: () => + [ + isFraction, + 'px', + 'full', + 'auto', + isArbitraryVariable, + isArbitraryValue, + theme.spacing, + ] as const, + gridTemplateColsRows: () => + [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue] as const, + gridColRowStartAndEnd: () => + [ + 'auto', + { span: ['full', isInteger, isArbitraryVariable, isArbitraryValue] }, + isArbitraryVariable, + isArbitraryValue, + ] as const, + gridColRowStartOrEnd: () => + [isInteger, 'auto', isArbitraryVariable, isArbitraryValue] as const, + gridAutoColsRows: () => + ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue] as const, + gap: () => [isArbitraryVariable, isArbitraryValue, theme.spacing] as const, + alignPrimaryAxis: () => + [ + 'start', + 'end', + 'center', + 'between', + 'around', + 'evenly', + 'stretch', + 'baseline', + ] as const, + alignSecondaryAxis: () => ['start', 'end', 'center', 'stretch'] as const, + unambiguousSpacing: () => [isArbitraryVariable, isArbitraryValue, theme.spacing] as const, + margin: () => ['auto', isArbitraryVariable, isArbitraryValue, theme.spacing] as const, + sizing: () => + [ + isFraction, + 'auto', + 'px', + 'full', + 'dvw', + 'dvh', + 'lvw', + 'lvh', + 'svw', + 'svh', + 'min', + 'max', + 'fit', + isArbitraryVariable, + isArbitraryValue, + theme.spacing, + ] as const, + gradientStopPosition: () => [isPercent, isArbitraryLength] as const, + borderWidth: () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength] as const, + lineStyle: () => ['solid', 'dashed', 'dotted', 'double'] as const, + blendMode: () => + [ + 'normal', + 'multiply', + 'screen', + 'overlay', + 'darken', + 'lighten', + 'color-dodge', + 'color-burn', + 'hard-light', + 'soft-light', + 'difference', + 'exclusion', + 'hue', + 'saturation', + 'color', + 'luminosity', + ] as const, + origin: () => + [ + 'center', + 'top', + 'top-right', + 'right', + 'bottom-right', + 'bottom', + 'bottom-left', + 'left', + 'top-left', + isArbitraryVariable, + isArbitraryValue, + ] as const, + rotate: () => ['none', isNumber, isArbitraryVariable, isArbitraryValue] as const, + scale: () => ['none', isNumber, isArbitraryVariable, isArbitraryValue] as const, + skew: () => [isNumber, isArbitraryVariable, isArbitraryValue] as const, + translate: () => + [ + isFraction, + 'full', + 'px', + isArbitraryVariable, + isArbitraryValue, + theme.spacing, + ] as const, + } satisfies Record ClassGroup> return { cacheSize: 500, @@ -220,7 +249,7 @@ export const getDefaultConfig = () => { isFraction, isArbitraryValue, isArbitraryVariable, - aspect, + theme.aspect, ], }, ], @@ -234,17 +263,19 @@ export const getDefaultConfig = () => { * Columns * @see https://tailwindcss.com/docs/columns */ - columns: [{ columns: [isNumber, isArbitraryValue, isArbitraryVariable, container] }], + columns: [ + { columns: [isNumber, isArbitraryValue, isArbitraryVariable, theme.container] }, + ], /** * Break After * @see https://tailwindcss.com/docs/break-after */ - 'break-after': [{ 'break-after': getBreakScale() }], + 'break-after': [{ 'break-after': scale.break() }], /** * Break Before * @see https://tailwindcss.com/docs/break-before */ - 'break-before': [{ 'break-before': getBreakScale() }], + 'break-before': [{ 'break-before': scale.break() }], /** * Break Inside * @see https://tailwindcss.com/docs/break-inside @@ -317,38 +348,38 @@ export const getDefaultConfig = () => { * @see https://tailwindcss.com/docs/object-position */ 'object-position': [ - { object: [...getPositionScale(), isArbitraryValue, isArbitraryVariable] }, + { object: [...scale.position(), isArbitraryValue, isArbitraryVariable] }, ], /** * Overflow * @see https://tailwindcss.com/docs/overflow */ - overflow: [{ overflow: getOverflowScale() }], + overflow: [{ overflow: scale.overflow() }], /** * Overflow X * @see https://tailwindcss.com/docs/overflow */ - 'overflow-x': [{ 'overflow-x': getOverflowScale() }], + 'overflow-x': [{ 'overflow-x': scale.overflow() }], /** * Overflow Y * @see https://tailwindcss.com/docs/overflow */ - 'overflow-y': [{ 'overflow-y': getOverflowScale() }], + 'overflow-y': [{ 'overflow-y': scale.overflow() }], /** * Overscroll Behavior * @see https://tailwindcss.com/docs/overscroll-behavior */ - overscroll: [{ overscroll: getOverscrollScale() }], + overscroll: [{ overscroll: scale.overscroll() }], /** * Overscroll Behavior X * @see https://tailwindcss.com/docs/overscroll-behavior */ - 'overscroll-x': [{ 'overscroll-x': getOverscrollScale() }], + 'overscroll-x': [{ 'overscroll-x': scale.overscroll() }], /** * Overscroll Behavior Y * @see https://tailwindcss.com/docs/overscroll-behavior */ - 'overscroll-y': [{ 'overscroll-y': getOverscrollScale() }], + 'overscroll-y': [{ 'overscroll-y': scale.overscroll() }], /** * Position * @see https://tailwindcss.com/docs/position @@ -358,47 +389,47 @@ export const getDefaultConfig = () => { * Top / Right / Bottom / Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ - inset: [{ inset: getInsetScale() }], + inset: [{ inset: scale.inset() }], /** * Right / Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ - 'inset-x': [{ 'inset-x': getInsetScale() }], + 'inset-x': [{ 'inset-x': scale.inset() }], /** * Top / Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ - 'inset-y': [{ 'inset-y': getInsetScale() }], + 'inset-y': [{ 'inset-y': scale.inset() }], /** * Start * @see https://tailwindcss.com/docs/top-right-bottom-left */ - start: [{ start: getInsetScale() }], + start: [{ start: scale.inset() }], /** * End * @see https://tailwindcss.com/docs/top-right-bottom-left */ - end: [{ end: getInsetScale() }], + end: [{ end: scale.inset() }], /** * Top * @see https://tailwindcss.com/docs/top-right-bottom-left */ - top: [{ top: getInsetScale() }], + top: [{ top: scale.inset() }], /** * Right * @see https://tailwindcss.com/docs/top-right-bottom-left */ - right: [{ right: getInsetScale() }], + right: [{ right: scale.inset() }], /** * Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ - bottom: [{ bottom: getInsetScale() }], + bottom: [{ bottom: scale.inset() }], /** * Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ - left: [{ left: getInsetScale() }], + left: [{ left: scale.inset() }], /** * Visibility * @see https://tailwindcss.com/docs/visibility @@ -426,8 +457,8 @@ export const getDefaultConfig = () => { 'auto', isArbitraryVariable, isArbitraryValue, - container, - spacing, + theme.container, + theme.spacing, ], }, ], @@ -476,42 +507,42 @@ export const getDefaultConfig = () => { * Grid Template Columns * @see https://tailwindcss.com/docs/grid-template-columns */ - 'grid-cols': [{ 'grid-cols': getGridTemplateColsRowsScale() }], + 'grid-cols': [{ 'grid-cols': scale.gridTemplateColsRows() }], /** * Grid Column Start / End * @see https://tailwindcss.com/docs/grid-column */ - 'col-start-end': [{ col: getGridColRowStartAndEndScale() }], + 'col-start-end': [{ col: scale.gridColRowStartAndEnd() }], /** * Grid Column Start * @see https://tailwindcss.com/docs/grid-column */ - 'col-start': [{ 'col-start': getGridColRowStartOrEndScale() }], + 'col-start': [{ 'col-start': scale.gridColRowStartOrEnd() }], /** * Grid Column End * @see https://tailwindcss.com/docs/grid-column */ - 'col-end': [{ 'col-end': getGridColRowStartOrEndScale() }], + 'col-end': [{ 'col-end': scale.gridColRowStartOrEnd() }], /** * Grid Template Rows * @see https://tailwindcss.com/docs/grid-template-rows */ - 'grid-rows': [{ 'grid-rows': getGridTemplateColsRowsScale() }], + 'grid-rows': [{ 'grid-rows': scale.gridTemplateColsRows() }], /** * Grid Row Start / End * @see https://tailwindcss.com/docs/grid-row */ - 'row-start-end': [{ row: getGridColRowStartAndEndScale() }], + 'row-start-end': [{ row: scale.gridColRowStartAndEnd() }], /** * Grid Row Start * @see https://tailwindcss.com/docs/grid-row */ - 'row-start': [{ 'row-start': getGridColRowStartOrEndScale() }], + 'row-start': [{ 'row-start': scale.gridColRowStartOrEnd() }], /** * Grid Row End * @see https://tailwindcss.com/docs/grid-row */ - 'row-end': [{ 'row-end': getGridColRowStartOrEndScale() }], + 'row-end': [{ 'row-end': scale.gridColRowStartOrEnd() }], /** * Grid Auto Flow * @see https://tailwindcss.com/docs/grid-auto-flow @@ -521,168 +552,168 @@ export const getDefaultConfig = () => { * Grid Auto Columns * @see https://tailwindcss.com/docs/grid-auto-columns */ - 'auto-cols': [{ 'auto-cols': getGridAutoColsRowsScale() }], + 'auto-cols': [{ 'auto-cols': scale.gridAutoColsRows() }], /** * Grid Auto Rows * @see https://tailwindcss.com/docs/grid-auto-rows */ - 'auto-rows': [{ 'auto-rows': getGridAutoColsRowsScale() }], + 'auto-rows': [{ 'auto-rows': scale.gridAutoColsRows() }], /** * Gap * @see https://tailwindcss.com/docs/gap */ - gap: [{ gap: getGapScale() }], + gap: [{ gap: scale.gap() }], /** * Gap X * @see https://tailwindcss.com/docs/gap */ - 'gap-x': [{ 'gap-x': getGapScale() }], + 'gap-x': [{ 'gap-x': scale.gap() }], /** * Gap Y * @see https://tailwindcss.com/docs/gap */ - 'gap-y': [{ 'gap-y': getGapScale() }], + 'gap-y': [{ 'gap-y': scale.gap() }], /** * Justify Content * @see https://tailwindcss.com/docs/justify-content */ - 'justify-content': [{ justify: [...getAlignPrimaryAxisScale(), 'normal'] }], + 'justify-content': [{ justify: [...scale.alignPrimaryAxis(), 'normal'] }], /** * Justify Items * @see https://tailwindcss.com/docs/justify-items */ - 'justify-items': [{ 'justify-items': [...getAlignSecondaryAxisScale(), 'normal'] }], + 'justify-items': [{ 'justify-items': [...scale.alignSecondaryAxis(), 'normal'] }], /** * Justify Self * @see https://tailwindcss.com/docs/justify-self */ - 'justify-self': [{ 'justify-self': ['auto', ...getAlignSecondaryAxisScale()] }], + 'justify-self': [{ 'justify-self': ['auto', ...scale.alignSecondaryAxis()] }], /** * Align Content * @see https://tailwindcss.com/docs/align-content */ - 'align-content': [{ content: ['normal', ...getAlignPrimaryAxisScale()] }], + 'align-content': [{ content: ['normal', ...scale.alignPrimaryAxis()] }], /** * Align Items * @see https://tailwindcss.com/docs/align-items */ - 'align-items': [{ items: [...getAlignSecondaryAxisScale(), 'baseline'] }], + 'align-items': [{ items: [...scale.alignSecondaryAxis(), 'baseline'] }], /** * Align Self * @see https://tailwindcss.com/docs/align-self */ - 'align-self': [{ self: ['auto', ...getAlignSecondaryAxisScale(), 'baseline'] }], + 'align-self': [{ self: ['auto', ...scale.alignSecondaryAxis(), 'baseline'] }], /** * Place Content * @see https://tailwindcss.com/docs/place-content */ - 'place-content': [{ 'place-content': getAlignPrimaryAxisScale() }], + 'place-content': [{ 'place-content': scale.alignPrimaryAxis() }], /** * Place Items * @see https://tailwindcss.com/docs/place-items */ - 'place-items': [{ 'place-items': [...getAlignSecondaryAxisScale(), 'baseline'] }], + 'place-items': [{ 'place-items': [...scale.alignSecondaryAxis(), 'baseline'] }], /** * Place Self * @see https://tailwindcss.com/docs/place-self */ - 'place-self': [{ 'place-self': ['auto', ...getAlignSecondaryAxisScale()] }], + 'place-self': [{ 'place-self': ['auto', ...scale.alignSecondaryAxis()] }], // Spacing /** * Padding * @see https://tailwindcss.com/docs/padding */ - p: [{ p: getUnambiguousSpacingScale() }], + p: [{ p: scale.unambiguousSpacing() }], /** * Padding X * @see https://tailwindcss.com/docs/padding */ - px: [{ px: getUnambiguousSpacingScale() }], + px: [{ px: scale.unambiguousSpacing() }], /** * Padding Y * @see https://tailwindcss.com/docs/padding */ - py: [{ py: getUnambiguousSpacingScale() }], + py: [{ py: scale.unambiguousSpacing() }], /** * Padding Start * @see https://tailwindcss.com/docs/padding */ - ps: [{ ps: getUnambiguousSpacingScale() }], + ps: [{ ps: scale.unambiguousSpacing() }], /** * Padding End * @see https://tailwindcss.com/docs/padding */ - pe: [{ pe: getUnambiguousSpacingScale() }], + pe: [{ pe: scale.unambiguousSpacing() }], /** * Padding Top * @see https://tailwindcss.com/docs/padding */ - pt: [{ pt: getUnambiguousSpacingScale() }], + pt: [{ pt: scale.unambiguousSpacing() }], /** * Padding Right * @see https://tailwindcss.com/docs/padding */ - pr: [{ pr: getUnambiguousSpacingScale() }], + pr: [{ pr: scale.unambiguousSpacing() }], /** * Padding Bottom * @see https://tailwindcss.com/docs/padding */ - pb: [{ pb: getUnambiguousSpacingScale() }], + pb: [{ pb: scale.unambiguousSpacing() }], /** * Padding Left * @see https://tailwindcss.com/docs/padding */ - pl: [{ pl: getUnambiguousSpacingScale() }], + pl: [{ pl: scale.unambiguousSpacing() }], /** * Margin * @see https://tailwindcss.com/docs/margin */ - m: [{ m: getMarginScale() }], + m: [{ m: scale.margin() }], /** * Margin X * @see https://tailwindcss.com/docs/margin */ - mx: [{ mx: getMarginScale() }], + mx: [{ mx: scale.margin() }], /** * Margin Y * @see https://tailwindcss.com/docs/margin */ - my: [{ my: getMarginScale() }], + my: [{ my: scale.margin() }], /** * Margin Start * @see https://tailwindcss.com/docs/margin */ - ms: [{ ms: getMarginScale() }], + ms: [{ ms: scale.margin() }], /** * Margin End * @see https://tailwindcss.com/docs/margin */ - me: [{ me: getMarginScale() }], + me: [{ me: scale.margin() }], /** * Margin Top * @see https://tailwindcss.com/docs/margin */ - mt: [{ mt: getMarginScale() }], + mt: [{ mt: scale.margin() }], /** * Margin Right * @see https://tailwindcss.com/docs/margin */ - mr: [{ mr: getMarginScale() }], + mr: [{ mr: scale.margin() }], /** * Margin Bottom * @see https://tailwindcss.com/docs/margin */ - mb: [{ mb: getMarginScale() }], + mb: [{ mb: scale.margin() }], /** * Margin Left * @see https://tailwindcss.com/docs/margin */ - ml: [{ ml: getMarginScale() }], + ml: [{ ml: scale.margin() }], /** * Space Between X * @see https://tailwindcss.com/docs/margin#adding-space-between-children */ - 'space-x': [{ 'space-x': getUnambiguousSpacingScale() }], + 'space-x': [{ 'space-x': scale.unambiguousSpacing() }], /** * Space Between X Reverse * @see https://tailwindcss.com/docs/margin#adding-space-between-children @@ -692,7 +723,7 @@ export const getDefaultConfig = () => { * Space Between Y * @see https://tailwindcss.com/docs/margin#adding-space-between-children */ - 'space-y': [{ 'space-y': getUnambiguousSpacingScale() }], + 'space-y': [{ 'space-y': scale.unambiguousSpacing() }], /** * Space Between Y Reverse * @see https://tailwindcss.com/docs/margin#adding-space-between-children @@ -711,13 +742,13 @@ export const getDefaultConfig = () => { * Size * @see https://tailwindcss.com/docs/width#setting-both-width-and-height */ - size: [{ size: getSizingScale() }], - w: [{ w: [container, 'screen', ...getSizingScale()] }], + size: [{ size: scale.sizing() }], + w: [{ w: [theme.container, 'screen', ...scale.sizing()] }], /** * Min-Width * @see https://tailwindcss.com/docs/min-width */ - 'min-w': [{ 'min-w': [container, 'screen', 'none', ...getSizingScale()] }], + 'min-w': [{ 'min-w': [theme.container, 'screen', 'none', ...scale.sizing()] }], /** * Max-Width * @see https://tailwindcss.com/docs/max-width @@ -725,12 +756,12 @@ export const getDefaultConfig = () => { 'max-w': [ { 'max-w': [ - container, + theme.container, 'screen', 'none', 'prose', - { screen: [breakpoint] }, - ...getSizingScale(), + { screen: [theme.breakpoint] }, + ...scale.sizing(), ], }, ], @@ -738,17 +769,17 @@ export const getDefaultConfig = () => { * Height * @see https://tailwindcss.com/docs/height */ - h: [{ h: ['screen', ...getSizingScale()] }], + h: [{ h: ['screen', ...scale.sizing()] }], /** * Min-Height * @see https://tailwindcss.com/docs/min-height */ - 'min-h': [{ 'min-h': ['screen', 'none', ...getSizingScale()] }], + 'min-h': [{ 'min-h': ['screen', 'none', ...scale.sizing()] }], /** * Max-Height * @see https://tailwindcss.com/docs/max-height */ - 'max-h': [{ 'max-h': ['screen', ...getSizingScale()] }], + 'max-h': [{ 'max-h': ['screen', ...scale.sizing()] }], // ------------------ // --- Typography --- @@ -758,7 +789,7 @@ export const getDefaultConfig = () => { * Font Size * @see https://tailwindcss.com/docs/font-size */ - 'font-size': [{ text: [text] }], + 'font-size': [{ text: [theme.text] }], /** * Font Smoothing * @see https://tailwindcss.com/docs/font-smoothing @@ -773,7 +804,7 @@ export const getDefaultConfig = () => { * Font Weight * @see https://tailwindcss.com/docs/font-weight */ - 'font-weight': [{ font: [fontWeight, isArbitraryVariable, isArbitraryNumber] }], + 'font-weight': [{ font: [theme.fontWeight, isArbitraryVariable, isArbitraryNumber] }], /** * Font Stretch * @see https://tailwindcss.com/docs/font-stretch @@ -799,7 +830,7 @@ export const getDefaultConfig = () => { * Font Family * @see https://tailwindcss.com/docs/font-family */ - 'font-family': [{ font: [font] }], + 'font-family': [{ font: [theme.font] }], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric @@ -834,7 +865,7 @@ export const getDefaultConfig = () => { * Letter Spacing * @see https://tailwindcss.com/docs/letter-spacing */ - tracking: [{ tracking: [tracking, isArbitraryVariable, isArbitraryValue] }], + tracking: [{ tracking: [theme.tracking, isArbitraryVariable, isArbitraryValue] }], /** * Line Clamp * @see https://tailwindcss.com/docs/line-clamp @@ -846,7 +877,9 @@ export const getDefaultConfig = () => { * Line Height * @see https://tailwindcss.com/docs/line-height */ - leading: [{ leading: [isArbitraryVariable, isArbitraryValue, leading, spacing] }], + leading: [ + { leading: [isArbitraryVariable, isArbitraryValue, theme.leading, theme.spacing] }, + ], /** * List Style Image * @see https://tailwindcss.com/docs/list-style-image @@ -874,12 +907,12 @@ export const getDefaultConfig = () => { * @deprecated since Tailwind CSS v3.0.0 * @see https://v3.tailwindcss.com/docs/placeholder-color */ - 'placeholder-color': [{ placeholder: [color] }], + 'placeholder-color': [{ placeholder: [theme.color] }], /** * Text Color * @see https://tailwindcss.com/docs/text-color */ - 'text-color': [{ text: [color] }], + 'text-color': [{ text: [theme.color] }], /** * Text Decoration * @see https://tailwindcss.com/docs/text-decoration @@ -889,7 +922,7 @@ export const getDefaultConfig = () => { * Text Decoration Style * @see https://tailwindcss.com/docs/text-decoration-style */ - 'text-decoration-style': [{ decoration: [...getLineStyleScale(), 'wavy'] }], + 'text-decoration-style': [{ decoration: [...scale.lineStyle(), 'wavy'] }], /** * Text Decoration Thickness * @see https://tailwindcss.com/docs/text-decoration-thickness @@ -909,7 +942,7 @@ export const getDefaultConfig = () => { * Text Decoration Color * @see https://tailwindcss.com/docs/text-decoration-color */ - 'text-decoration-color': [{ decoration: [color] }], + 'text-decoration-color': [{ decoration: [theme.color] }], /** * Text Underline Offset * @see https://tailwindcss.com/docs/text-underline-offset @@ -936,7 +969,7 @@ export const getDefaultConfig = () => { * Text Indent * @see https://tailwindcss.com/docs/text-indent */ - indent: [{ indent: ['px', ...getUnambiguousSpacingScale()] }], + indent: [{ indent: ['px', ...scale.unambiguousSpacing()] }], /** * Vertical Alignment * @see https://tailwindcss.com/docs/vertical-align @@ -1004,7 +1037,9 @@ export const getDefaultConfig = () => { * @see https://tailwindcss.com/docs/background-position */ 'bg-position': [ - { bg: [...getPositionScale(), isArbitraryVariablePosition, isArbitraryPosition] }, + { + bg: [...scale.position(), isArbitraryVariablePosition, isArbitraryPosition], + }, ], /** * Background Repeat @@ -1045,37 +1080,37 @@ export const getDefaultConfig = () => { * Background Color * @see https://tailwindcss.com/docs/background-color */ - 'bg-color': [{ bg: [color] }], + 'bg-color': [{ bg: [theme.color] }], /** * Gradient Color Stops From Position * @see https://tailwindcss.com/docs/gradient-color-stops */ - 'gradient-from-pos': [{ from: getGradientStopPositionScale() }], + 'gradient-from-pos': [{ from: scale.gradientStopPosition() }], /** * Gradient Color Stops Via Position * @see https://tailwindcss.com/docs/gradient-color-stops */ - 'gradient-via-pos': [{ via: getGradientStopPositionScale() }], + 'gradient-via-pos': [{ via: scale.gradientStopPosition() }], /** * Gradient Color Stops To Position * @see https://tailwindcss.com/docs/gradient-color-stops */ - 'gradient-to-pos': [{ to: getGradientStopPositionScale() }], + 'gradient-to-pos': [{ to: scale.gradientStopPosition() }], /** * Gradient Color Stops From * @see https://tailwindcss.com/docs/gradient-color-stops */ - 'gradient-from': [{ from: [color] }], + 'gradient-from': [{ from: [theme.color] }], /** * Gradient Color Stops Via * @see https://tailwindcss.com/docs/gradient-color-stops */ - 'gradient-via': [{ via: [color] }], + 'gradient-via': [{ via: [theme.color] }], /** * Gradient Color Stops To * @see https://tailwindcss.com/docs/gradient-color-stops */ - 'gradient-to': [{ to: [color] }], + 'gradient-to': [{ to: [theme.color] }], // --------------- // --- Borders --- @@ -1085,127 +1120,127 @@ export const getDefaultConfig = () => { * Border Radius * @see https://tailwindcss.com/docs/border-radius */ - rounded: [{ rounded: [radius] }], + rounded: [{ rounded: [theme.radius] }], /** * Border Radius Start * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-s': [{ 'rounded-s': [radius] }], + 'rounded-s': [{ 'rounded-s': [theme.radius] }], /** * Border Radius End * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-e': [{ 'rounded-e': [radius] }], + 'rounded-e': [{ 'rounded-e': [theme.radius] }], /** * Border Radius Top * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-t': [{ 'rounded-t': [radius] }], + 'rounded-t': [{ 'rounded-t': [theme.radius] }], /** * Border Radius Right * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-r': [{ 'rounded-r': [radius] }], + 'rounded-r': [{ 'rounded-r': [theme.radius] }], /** * Border Radius Bottom * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-b': [{ 'rounded-b': [radius] }], + 'rounded-b': [{ 'rounded-b': [theme.radius] }], /** * Border Radius Left * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-l': [{ 'rounded-l': [radius] }], + 'rounded-l': [{ 'rounded-l': [theme.radius] }], /** * Border Radius Start Start * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-ss': [{ 'rounded-ss': [radius] }], + 'rounded-ss': [{ 'rounded-ss': [theme.radius] }], /** * Border Radius Start End * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-se': [{ 'rounded-se': [radius] }], + 'rounded-se': [{ 'rounded-se': [theme.radius] }], /** * Border Radius End End * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-ee': [{ 'rounded-ee': [radius] }], + 'rounded-ee': [{ 'rounded-ee': [theme.radius] }], /** * Border Radius End Start * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-es': [{ 'rounded-es': [radius] }], + 'rounded-es': [{ 'rounded-es': [theme.radius] }], /** * Border Radius Top Left * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-tl': [{ 'rounded-tl': [radius] }], + 'rounded-tl': [{ 'rounded-tl': [theme.radius] }], /** * Border Radius Top Right * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-tr': [{ 'rounded-tr': [radius] }], + 'rounded-tr': [{ 'rounded-tr': [theme.radius] }], /** * Border Radius Bottom Right * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-br': [{ 'rounded-br': [radius] }], + 'rounded-br': [{ 'rounded-br': [theme.radius] }], /** * Border Radius Bottom Left * @see https://tailwindcss.com/docs/border-radius */ - 'rounded-bl': [{ 'rounded-bl': [radius] }], + 'rounded-bl': [{ 'rounded-bl': [theme.radius] }], /** * Border Width * @see https://tailwindcss.com/docs/border-width */ - 'border-w': [{ border: getBorderWidthScale() }], + 'border-w': [{ border: scale.borderWidth() }], /** * Border Width X * @see https://tailwindcss.com/docs/border-width */ - 'border-w-x': [{ 'border-x': getBorderWidthScale() }], + 'border-w-x': [{ 'border-x': scale.borderWidth() }], /** * Border Width Y * @see https://tailwindcss.com/docs/border-width */ - 'border-w-y': [{ 'border-y': getBorderWidthScale() }], + 'border-w-y': [{ 'border-y': scale.borderWidth() }], /** * Border Width Start * @see https://tailwindcss.com/docs/border-width */ - 'border-w-s': [{ 'border-s': getBorderWidthScale() }], + 'border-w-s': [{ 'border-s': scale.borderWidth() }], /** * Border Width End * @see https://tailwindcss.com/docs/border-width */ - 'border-w-e': [{ 'border-e': getBorderWidthScale() }], + 'border-w-e': [{ 'border-e': scale.borderWidth() }], /** * Border Width Top * @see https://tailwindcss.com/docs/border-width */ - 'border-w-t': [{ 'border-t': getBorderWidthScale() }], + 'border-w-t': [{ 'border-t': scale.borderWidth() }], /** * Border Width Right * @see https://tailwindcss.com/docs/border-width */ - 'border-w-r': [{ 'border-r': getBorderWidthScale() }], + 'border-w-r': [{ 'border-r': scale.borderWidth() }], /** * Border Width Bottom * @see https://tailwindcss.com/docs/border-width */ - 'border-w-b': [{ 'border-b': getBorderWidthScale() }], + 'border-w-b': [{ 'border-b': scale.borderWidth() }], /** * Border Width Left * @see https://tailwindcss.com/docs/border-width */ - 'border-w-l': [{ 'border-l': getBorderWidthScale() }], + 'border-w-l': [{ 'border-l': scale.borderWidth() }], /** * Divide Width X * @see https://tailwindcss.com/docs/border-width#between-children */ - 'divide-x': [{ 'divide-x': getBorderWidthScale() }], + 'divide-x': [{ 'divide-x': scale.borderWidth() }], /** * Divide Width X Reverse * @see https://tailwindcss.com/docs/border-width#between-children @@ -1215,7 +1250,7 @@ export const getDefaultConfig = () => { * Divide Width Y * @see https://tailwindcss.com/docs/border-width#between-children */ - 'divide-y': [{ 'divide-y': getBorderWidthScale() }], + 'divide-y': [{ 'divide-y': scale.borderWidth() }], /** * Divide Width Y Reverse * @see https://tailwindcss.com/docs/border-width#between-children @@ -1225,67 +1260,67 @@ export const getDefaultConfig = () => { * Border Style * @see https://tailwindcss.com/docs/border-style */ - 'border-style': [{ border: [...getLineStyleScale(), 'hidden', 'none'] }], + 'border-style': [{ border: [...scale.lineStyle(), 'hidden', 'none'] }], /** * Divide Style * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style */ - 'divide-style': [{ divide: [...getLineStyleScale(), 'hidden', 'none'] }], + 'divide-style': [{ divide: [...scale.lineStyle(), 'hidden', 'none'] }], /** * Border Color * @see https://tailwindcss.com/docs/border-color */ - 'border-color': [{ border: [color] }], + 'border-color': [{ border: [theme.color] }], /** * Border Color X * @see https://tailwindcss.com/docs/border-color */ - 'border-color-x': [{ 'border-x': [color] }], + 'border-color-x': [{ 'border-x': [theme.color] }], /** * Border Color Y * @see https://tailwindcss.com/docs/border-color */ - 'border-color-y': [{ 'border-y': [color] }], + 'border-color-y': [{ 'border-y': [theme.color] }], /** * Border Color S * @see https://tailwindcss.com/docs/border-color */ - 'border-color-s': [{ 'border-s': [color] }], + 'border-color-s': [{ 'border-s': [theme.color] }], /** * Border Color E * @see https://tailwindcss.com/docs/border-color */ - 'border-color-e': [{ 'border-e': [color] }], + 'border-color-e': [{ 'border-e': [theme.color] }], /** * Border Color Top * @see https://tailwindcss.com/docs/border-color */ - 'border-color-t': [{ 'border-t': [color] }], + 'border-color-t': [{ 'border-t': [theme.color] }], /** * Border Color Right * @see https://tailwindcss.com/docs/border-color */ - 'border-color-r': [{ 'border-r': [color] }], + 'border-color-r': [{ 'border-r': [theme.color] }], /** * Border Color Bottom * @see https://tailwindcss.com/docs/border-color */ - 'border-color-b': [{ 'border-b': [color] }], + 'border-color-b': [{ 'border-b': [theme.color] }], /** * Border Color Left * @see https://tailwindcss.com/docs/border-color */ - 'border-color-l': [{ 'border-l': [color] }], + 'border-color-l': [{ 'border-l': [theme.color] }], /** * Divide Color * @see https://tailwindcss.com/docs/divide-color */ - 'divide-color': [{ divide: [color] }], + 'divide-color': [{ divide: [theme.color] }], /** * Outline Style * @see https://tailwindcss.com/docs/outline-style */ - 'outline-style': [{ outline: [...getLineStyleScale(), 'none', 'hidden'] }], + 'outline-style': [{ outline: [...scale.lineStyle(), 'none', 'hidden'] }], /** * Outline Offset * @see https://tailwindcss.com/docs/outline-offset @@ -1304,7 +1339,7 @@ export const getDefaultConfig = () => { * Outline Color * @see https://tailwindcss.com/docs/outline-color */ - 'outline-color': [{ outline: [color] }], + 'outline-color': [{ outline: [theme.color] }], // --------------- // --- Effects --- @@ -1319,7 +1354,7 @@ export const getDefaultConfig = () => { shadow: [ // Deprecated since Tailwind CSS v4.0.0 '', - shadow, + theme.shadow, ], }, ], @@ -1327,24 +1362,31 @@ export const getDefaultConfig = () => { * Box Shadow Color * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color */ - 'shadow-color': [{ shadow: [color] }], + 'shadow-color': [{ shadow: [theme.color] }], /** * Inset Box Shadow * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow */ 'inset-shadow': [ - { 'inset-shadow': ['none', isArbitraryVariable, isArbitraryValue, insetShadow] }, + { + 'inset-shadow': [ + 'none', + isArbitraryVariable, + isArbitraryValue, + theme.insetShadow, + ], + }, ], /** * Inset Box Shadow Color * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color */ - 'inset-shadow-color': [{ 'inset-shadow': [color] }], + 'inset-shadow-color': [{ 'inset-shadow': [theme.color] }], /** * Ring Width * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring */ - 'ring-w': [{ ring: getBorderWidthScale() }], + 'ring-w': [{ ring: scale.borderWidth() }], /** * Ring Width Inset * @see https://v3.tailwindcss.com/docs/ring-width#inset-rings @@ -1356,7 +1398,7 @@ export const getDefaultConfig = () => { * Ring Color * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color */ - 'ring-color': [{ ring: [color] }], + 'ring-color': [{ ring: [theme.color] }], /** * Ring Offset Width * @see https://v3.tailwindcss.com/docs/ring-offset-width @@ -1370,17 +1412,17 @@ export const getDefaultConfig = () => { * @deprecated since Tailwind CSS v4.0.0 * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158 */ - 'ring-offset-color': [{ 'ring-offset': [color] }], + 'ring-offset-color': [{ 'ring-offset': [theme.color] }], /** * Inset Ring Width * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring */ - 'inset-ring-w': [{ 'inset-ring': getBorderWidthScale() }], + 'inset-ring-w': [{ 'inset-ring': scale.borderWidth() }], /** * Inset Ring Color * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color */ - 'inset-ring-color': [{ 'inset-ring': [color] }], + 'inset-ring-color': [{ 'inset-ring': [theme.color] }], /** * Opacity * @see https://tailwindcss.com/docs/opacity @@ -1390,12 +1432,12 @@ export const getDefaultConfig = () => { * Mix Blend Mode * @see https://tailwindcss.com/docs/mix-blend-mode */ - 'mix-blend': [{ 'mix-blend': [...getBlendModeScale(), 'plus-darker', 'plus-lighter'] }], + 'mix-blend': [{ 'mix-blend': [...scale.blendMode(), 'plus-darker', 'plus-lighter'] }], /** * Background Blend Mode * @see https://tailwindcss.com/docs/background-blend-mode */ - 'bg-blend': [{ 'bg-blend': getBlendModeScale() }], + 'bg-blend': [{ 'bg-blend': scale.blendMode() }], // --------------- // --- Filters --- @@ -1420,7 +1462,7 @@ export const getDefaultConfig = () => { * Blur * @see https://tailwindcss.com/docs/blur */ - blur: [{ blur: [blur] }], + blur: [{ blur: [theme.blur] }], /** * Brightness * @see https://tailwindcss.com/docs/brightness @@ -1435,7 +1477,7 @@ export const getDefaultConfig = () => { * Drop Shadow * @see https://tailwindcss.com/docs/drop-shadow */ - 'drop-shadow': [{ 'drop-shadow': [dropShadow] }], + 'drop-shadow': [{ 'drop-shadow': [theme.dropShadow] }], /** * Grayscale * @see https://tailwindcss.com/docs/grayscale @@ -1480,7 +1522,7 @@ export const getDefaultConfig = () => { * Backdrop Blur * @see https://tailwindcss.com/docs/backdrop-blur */ - 'backdrop-blur': [{ 'backdrop-blur': [blur] }], + 'backdrop-blur': [{ 'backdrop-blur': [theme.blur] }], /** * Backdrop Brightness * @see https://tailwindcss.com/docs/backdrop-brightness @@ -1551,17 +1593,17 @@ export const getDefaultConfig = () => { * Border Spacing * @see https://tailwindcss.com/docs/border-spacing */ - 'border-spacing': [{ 'border-spacing': getUnambiguousSpacingScale() }], + 'border-spacing': [{ 'border-spacing': scale.unambiguousSpacing() }], /** * Border Spacing X * @see https://tailwindcss.com/docs/border-spacing */ - 'border-spacing-x': [{ 'border-spacing-x': getUnambiguousSpacingScale() }], + 'border-spacing-x': [{ 'border-spacing-x': scale.unambiguousSpacing() }], /** * Border Spacing Y * @see https://tailwindcss.com/docs/border-spacing */ - 'border-spacing-y': [{ 'border-spacing-y': getUnambiguousSpacingScale() }], + 'border-spacing-y': [{ 'border-spacing-y': scale.unambiguousSpacing() }], /** * Table Layout * @see https://tailwindcss.com/docs/table-layout @@ -1610,7 +1652,9 @@ export const getDefaultConfig = () => { * Transition Timing Function * @see https://tailwindcss.com/docs/transition-timing-function */ - ease: [{ ease: ['linear', 'initial', isArbitraryVariable, isArbitraryValue, ease] }], + ease: [ + { ease: ['linear', 'initial', isArbitraryVariable, isArbitraryValue, theme.ease] }, + ], /** * Transition Delay * @see https://tailwindcss.com/docs/transition-delay @@ -1620,7 +1664,7 @@ export const getDefaultConfig = () => { * Animation * @see https://tailwindcss.com/docs/animation */ - animate: [{ animate: ['none', isArbitraryVariable, isArbitraryValue, animate] }], + animate: [{ animate: ['none', isArbitraryVariable, isArbitraryValue, theme.animate] }], // ------------------ // --- Transforms --- @@ -1635,52 +1679,54 @@ export const getDefaultConfig = () => { * Perspective * @see https://tailwindcss.com/docs/perspective */ - perspective: [{ perspective: [perspective, isArbitraryVariable, isArbitraryValue] }], + perspective: [ + { perspective: [theme.perspective, isArbitraryVariable, isArbitraryValue] }, + ], /** * Perspective Origin * @see https://tailwindcss.com/docs/perspective-origin */ - 'perspective-origin': [{ 'perspective-origin': getOriginScale() }], + 'perspective-origin': [{ 'perspective-origin': scale.origin() }], /** * Rotate * @see https://tailwindcss.com/docs/rotate */ - rotate: [{ rotate: getRotateScale() }], + rotate: [{ rotate: scale.rotate() }], /** * Rotate X * @see https://tailwindcss.com/docs/rotate */ - 'rotate-x': [{ 'rotate-x': getRotateScale() }], + 'rotate-x': [{ 'rotate-x': scale.rotate() }], /** * Rotate Y * @see https://tailwindcss.com/docs/rotate */ - 'rotate-y': [{ 'rotate-y': getRotateScale() }], + 'rotate-y': [{ 'rotate-y': scale.rotate() }], /** * Rotate Z * @see https://tailwindcss.com/docs/rotate */ - 'rotate-z': [{ 'rotate-z': getRotateScale() }], + 'rotate-z': [{ 'rotate-z': scale.rotate() }], /** * Scale * @see https://tailwindcss.com/docs/scale */ - scale: [{ scale: getScaleScale() }], + scale: [{ scale: scale.scale() }], /** * Scale X * @see https://tailwindcss.com/docs/scale */ - 'scale-x': [{ 'scale-x': getScaleScale() }], + 'scale-x': [{ 'scale-x': scale.scale() }], /** * Scale Y * @see https://tailwindcss.com/docs/scale */ - 'scale-y': [{ 'scale-y': getScaleScale() }], + 'scale-y': [{ 'scale-y': scale.scale() }], /** * Scale Z * @see https://tailwindcss.com/docs/scale */ - 'scale-z': [{ 'scale-z': getScaleScale() }], + 'scale-z': [{ 'scale-z': scale.scale() }], /** * Scale 3D * @see https://tailwindcss.com/docs/scale @@ -1690,17 +1736,17 @@ export const getDefaultConfig = () => { * Skew * @see https://tailwindcss.com/docs/skew */ - skew: [{ skew: getSkewScale() }], + skew: [{ skew: scale.skew() }], /** * Skew X * @see https://tailwindcss.com/docs/skew */ - 'skew-x': [{ 'skew-x': getSkewScale() }], + 'skew-x': [{ 'skew-x': scale.skew() }], /** * Skew Y * @see https://tailwindcss.com/docs/skew */ - 'skew-y': [{ 'skew-y': getSkewScale() }], + 'skew-y': [{ 'skew-y': scale.skew() }], /** * Transform * @see https://tailwindcss.com/docs/transform @@ -1712,7 +1758,7 @@ export const getDefaultConfig = () => { * Transform Origin * @see https://tailwindcss.com/docs/transform-origin */ - 'transform-origin': [{ origin: getOriginScale() }], + 'transform-origin': [{ origin: scale.origin() }], /** * Transform Style * @see https://tailwindcss.com/docs/transform-style @@ -1722,22 +1768,22 @@ export const getDefaultConfig = () => { * Translate * @see https://tailwindcss.com/docs/translate */ - translate: [{ translate: getTranslateScale() }], + translate: [{ translate: scale.translate() }], /** * Translate X * @see https://tailwindcss.com/docs/translate */ - 'translate-x': [{ 'translate-x': getTranslateScale() }], + 'translate-x': [{ 'translate-x': scale.translate() }], /** * Translate Y * @see https://tailwindcss.com/docs/translate */ - 'translate-y': [{ 'translate-y': getTranslateScale() }], + 'translate-y': [{ 'translate-y': scale.translate() }], /** * Translate Z * @see https://tailwindcss.com/docs/translate */ - 'translate-z': [{ 'translate-z': getTranslateScale() }], + 'translate-z': [{ 'translate-z': scale.translate() }], /** * Translate None * @see https://tailwindcss.com/docs/translate @@ -1752,7 +1798,7 @@ export const getDefaultConfig = () => { * Accent Color * @see https://tailwindcss.com/docs/accent-color */ - accent: [{ accent: [color] }], + accent: [{ accent: [theme.color] }], /** * Appearance * @see https://tailwindcss.com/docs/appearance @@ -1762,7 +1808,7 @@ export const getDefaultConfig = () => { * Caret Color * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities */ - 'caret-color': [{ caret: [color] }], + 'caret-color': [{ caret: [theme.color] }], /** * Color Scheme * @see https://tailwindcss.com/docs/color-scheme @@ -1842,92 +1888,92 @@ export const getDefaultConfig = () => { * Scroll Margin * @see https://tailwindcss.com/docs/scroll-margin */ - 'scroll-m': [{ 'scroll-m': getUnambiguousSpacingScale() }], + 'scroll-m': [{ 'scroll-m': scale.unambiguousSpacing() }], /** * Scroll Margin X * @see https://tailwindcss.com/docs/scroll-margin */ - 'scroll-mx': [{ 'scroll-mx': getUnambiguousSpacingScale() }], + 'scroll-mx': [{ 'scroll-mx': scale.unambiguousSpacing() }], /** * Scroll Margin Y * @see https://tailwindcss.com/docs/scroll-margin */ - 'scroll-my': [{ 'scroll-my': getUnambiguousSpacingScale() }], + 'scroll-my': [{ 'scroll-my': scale.unambiguousSpacing() }], /** * Scroll Margin Start * @see https://tailwindcss.com/docs/scroll-margin */ - 'scroll-ms': [{ 'scroll-ms': getUnambiguousSpacingScale() }], + 'scroll-ms': [{ 'scroll-ms': scale.unambiguousSpacing() }], /** * Scroll Margin End * @see https://tailwindcss.com/docs/scroll-margin */ - 'scroll-me': [{ 'scroll-me': getUnambiguousSpacingScale() }], + 'scroll-me': [{ 'scroll-me': scale.unambiguousSpacing() }], /** * Scroll Margin Top * @see https://tailwindcss.com/docs/scroll-margin */ - 'scroll-mt': [{ 'scroll-mt': getUnambiguousSpacingScale() }], + 'scroll-mt': [{ 'scroll-mt': scale.unambiguousSpacing() }], /** * Scroll Margin Right * @see https://tailwindcss.com/docs/scroll-margin */ - 'scroll-mr': [{ 'scroll-mr': getUnambiguousSpacingScale() }], + 'scroll-mr': [{ 'scroll-mr': scale.unambiguousSpacing() }], /** * Scroll Margin Bottom * @see https://tailwindcss.com/docs/scroll-margin */ - 'scroll-mb': [{ 'scroll-mb': getUnambiguousSpacingScale() }], + 'scroll-mb': [{ 'scroll-mb': scale.unambiguousSpacing() }], /** * Scroll Margin Left * @see https://tailwindcss.com/docs/scroll-margin */ - 'scroll-ml': [{ 'scroll-ml': getUnambiguousSpacingScale() }], + 'scroll-ml': [{ 'scroll-ml': scale.unambiguousSpacing() }], /** * Scroll Padding * @see https://tailwindcss.com/docs/scroll-padding */ - 'scroll-p': [{ 'scroll-p': getUnambiguousSpacingScale() }], + 'scroll-p': [{ 'scroll-p': scale.unambiguousSpacing() }], /** * Scroll Padding X * @see https://tailwindcss.com/docs/scroll-padding */ - 'scroll-px': [{ 'scroll-px': getUnambiguousSpacingScale() }], + 'scroll-px': [{ 'scroll-px': scale.unambiguousSpacing() }], /** * Scroll Padding Y * @see https://tailwindcss.com/docs/scroll-padding */ - 'scroll-py': [{ 'scroll-py': getUnambiguousSpacingScale() }], + 'scroll-py': [{ 'scroll-py': scale.unambiguousSpacing() }], /** * Scroll Padding Start * @see https://tailwindcss.com/docs/scroll-padding */ - 'scroll-ps': [{ 'scroll-ps': getUnambiguousSpacingScale() }], + 'scroll-ps': [{ 'scroll-ps': scale.unambiguousSpacing() }], /** * Scroll Padding End * @see https://tailwindcss.com/docs/scroll-padding */ - 'scroll-pe': [{ 'scroll-pe': getUnambiguousSpacingScale() }], + 'scroll-pe': [{ 'scroll-pe': scale.unambiguousSpacing() }], /** * Scroll Padding Top * @see https://tailwindcss.com/docs/scroll-padding */ - 'scroll-pt': [{ 'scroll-pt': getUnambiguousSpacingScale() }], + 'scroll-pt': [{ 'scroll-pt': scale.unambiguousSpacing() }], /** * Scroll Padding Right * @see https://tailwindcss.com/docs/scroll-padding */ - 'scroll-pr': [{ 'scroll-pr': getUnambiguousSpacingScale() }], + 'scroll-pr': [{ 'scroll-pr': scale.unambiguousSpacing() }], /** * Scroll Padding Bottom * @see https://tailwindcss.com/docs/scroll-padding */ - 'scroll-pb': [{ 'scroll-pb': getUnambiguousSpacingScale() }], + 'scroll-pb': [{ 'scroll-pb': scale.unambiguousSpacing() }], /** * Scroll Padding Left * @see https://tailwindcss.com/docs/scroll-padding */ - 'scroll-pl': [{ 'scroll-pl': getUnambiguousSpacingScale() }], + 'scroll-pl': [{ 'scroll-pl': scale.unambiguousSpacing() }], /** * Scroll Snap Align * @see https://tailwindcss.com/docs/scroll-snap-align @@ -1998,7 +2044,7 @@ export const getDefaultConfig = () => { * Fill * @see https://tailwindcss.com/docs/fill */ - fill: [{ fill: ['none', color] }], + fill: [{ fill: ['none', theme.color] }], /** * Stroke Width * @see https://tailwindcss.com/docs/stroke-width @@ -2017,7 +2063,7 @@ export const getDefaultConfig = () => { * Stroke * @see https://tailwindcss.com/docs/stroke */ - stroke: [{ stroke: ['none', color] }], + stroke: [{ stroke: ['none', theme.color] }], // --------------------- // --- Accessibility ---