tailwind-merge

import { fromTheme } from './from-theme' import { Config, DefaultClassGroupIds, DefaultThemeGroupIds } from './types' import { isAny, isAnyNonArbitrary, isArbitraryImage, isArbitraryLength, isArbitraryNumber, isArbitraryPosition, isArbitraryShadow, isArbitrarySize, isArbitraryValue, isArbitraryVariable, isArbitraryVariableFamilyName, isArbitraryVariableImage, isArbitraryVariableLength, isArbitraryVariablePosition, isArbitraryVariableShadow, isArbitraryVariableSize, isFraction, isInteger, isNumber, isPercent, isTshirtSize, } from './validators' export const getDefaultConfig = () => { /** * Theme getters for theme variable namespaces * @see https://tailwindcss.com/docs/theme#theme-variable-namespaces */ /***/ const themeColor = fromTheme('color') const themeFont = fromTheme('font') const themeText = fromTheme('text') const themeFontWeight = fromTheme('font-weight') const themeTracking = fromTheme('tracking') const themeLeading = fromTheme('leading') const themeBreakpoint = fromTheme('breakpoint') const themeContainer = fromTheme('container') const themeSpacing = fromTheme('spacing') const themeRadius = fromTheme('radius') const themeShadow = fromTheme('shadow') const themeInsetShadow = fromTheme('inset-shadow') const themeDropShadow = fromTheme('drop-shadow') const themeBlur = fromTheme('blur') const themePerspective = fromTheme('perspective') const themeAspect = fromTheme('aspect') const themeEase = fromTheme('ease') const themeAnimate = fromTheme('animate') /** * Helpers to avoid repeating the same scales * * We use functions that create a new array every time they're called instead of static arrays. * This ensures that users who modify any scale by mutating the array (e.g. with `array.push(element)`) don't accidentally mutate arrays in other parts of the config. */ /***/ const scaleBreak = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const const scalePosition = () => [ 'bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top', ] as const const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const const scaleOverscroll = () => ['auto', 'contain', 'none'] as const const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing] as const const scaleInset = () => [isFraction, 'full', 'auto', ...scaleUnambiguousSpacing()] as const const scaleGridTemplateColsRows = () => [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue] as const const scaleGridColRowStartAndEnd = () => [ 'auto', { span: ['full', isInteger, isArbitraryVariable, isArbitraryValue] }, isInteger, isArbitraryVariable, isArbitraryValue, ] as const const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue] as const const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue] as const const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline'] as const const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch'] as const const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()] as const const scaleSizing = () => [ isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing(), ] as const const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue] as const const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength] as const const scaleRadius = () => [ // Deprecated since Tailwind CSS v4.0.0 '', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue, ] as const const scaleBorderWidth = () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength] as const const scaleLineStyle = () => ['solid', 'dashed', 'dotted', 'double'] as const const scaleBlendMode = () => [ 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', ] as const const scaleBlur = () => [ // Deprecated since Tailwind CSS v4.0.0 '', 'none', themeBlur, isArbitraryVariable, isArbitraryValue, ] as const const scaleOrigin = () => [ 'center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', isArbitraryVariable, isArbitraryValue, ] as const const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue] as const const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue] as const const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue] as const const scaleTranslate = () => [isFraction, 'full', ...scaleUnambiguousSpacing()] as const return { cacheSize: 500, theme: { animate: ['spin', 'ping', 'pulse', 'bounce'], aspect: ['video'], blur: [isTshirtSize], breakpoint: [isTshirtSize], color: [isAny], container: [isTshirtSize], 'drop-shadow': [isTshirtSize], ease: ['in', 'out', 'in-out'], font: [isAnyNonArbitrary], 'font-weight': [ 'thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black', ], 'inset-shadow': [isTshirtSize], leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'], perspective: ['dramatic', 'near', 'normal', 'midrange', 'distant', 'none'], radius: [isTshirtSize], shadow: [isTshirtSize], spacing: ['px', isNumber], text: [isTshirtSize], tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest'], }, classGroups: { // -------------- // --- Layout --- // -------------- /** * Aspect Ratio * @see https://tailwindcss.com/docs/aspect-ratio */ aspect: [ { aspect: [ 'auto', 'square', isFraction, isArbitraryValue, isArbitraryVariable, themeAspect, ], }, ], /** * Container * @see https://tailwindcss.com/docs/container * @deprecated since Tailwind CSS v4.0.0 */ container: ['container'], /** * Columns * @see https://tailwindcss.com/docs/columns */ columns: [ { columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer] }, ], /** * Break After * @see https://tailwindcss.com/docs/break-after */ 'break-after': [{ 'break-after': scaleBreak() }], /** * Break Before * @see https://tailwindcss.com/docs/break-before */ 'break-before': [{ 'break-before': scaleBreak() }], /** * Break Inside * @see https://tailwindcss.com/docs/break-inside */ 'break-inside': [{ 'break-inside': ['auto', 'avoid', 'avoid-page', 'avoid-column'] }], /** * Box Decoration Break * @see https://tailwindcss.com/docs/box-decoration-break */ 'box-decoration': [{ 'box-decoration': ['slice', 'clone'] }], /** * Box Sizing * @see https://tailwindcss.com/docs/box-sizing */ box: [{ box: ['border', 'content'] }], /** * Display * @see https://tailwindcss.com/docs/display */ display: [ 'block', 'inline-block', 'inline', 'flex', 'inline-flex', 'table', 'inline-table', 'table-caption', 'table-cell', 'table-column', 'table-column-group', 'table-footer-group', 'table-header-group', 'table-row-group', 'table-row', 'flow-root', 'grid', 'inline-grid', 'contents', 'list-item', 'hidden', ], /** * Screen Reader Only * @see https://tailwindcss.com/docs/display#screen-reader-only */ sr: ['sr-only', 'not-sr-only'], /** * Floats * @see https://tailwindcss.com/docs/float */ float: [{ float: ['right', 'left', 'none', 'start', 'end'] }], /** * Clear * @see https://tailwindcss.com/docs/clear */ clear: [{ clear: ['left', 'right', 'both', 'none', 'start', 'end'] }], /** * Isolation * @see https://tailwindcss.com/docs/isolation */ isolation: ['isolate', 'isolation-auto'], /** * Object Fit * @see https://tailwindcss.com/docs/object-fit */ 'object-fit': [{ object: ['contain', 'cover', 'fill', 'none', 'scale-down'] }], /** * Object Position * @see https://tailwindcss.com/docs/object-position */ 'object-position': [ { object: [...scalePosition(), isArbitraryValue, isArbitraryVariable] }, ], /** * Overflow * @see https://tailwindcss.com/docs/overflow */ overflow: [{ overflow: scaleOverflow() }], /** * Overflow X * @see https://tailwindcss.com/docs/overflow */ 'overflow-x': [{ 'overflow-x': scaleOverflow() }], /** * Overflow Y * @see https://tailwindcss.com/docs/overflow */ 'overflow-y': [{ 'overflow-y': scaleOverflow() }], /** * Overscroll Behavior * @see https://tailwindcss.com/docs/overscroll-behavior */ overscroll: [{ overscroll: scaleOverscroll() }], /** * Overscroll Behavior X * @see https://tailwindcss.com/docs/overscroll-behavior */ 'overscroll-x': [{ 'overscroll-x': scaleOverscroll() }], /** * Overscroll Behavior Y * @see https://tailwindcss.com/docs/overscroll-behavior */ 'overscroll-y': [{ 'overscroll-y': scaleOverscroll() }], /** * Position * @see https://tailwindcss.com/docs/position */ position: ['static', 'fixed', 'absolute', 'relative', 'sticky'], /** * Top / Right / Bottom / Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ inset: [{ inset: scaleInset() }], /** * Right / Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ 'inset-x': [{ 'inset-x': scaleInset() }], /** * Top / Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ 'inset-y': [{ 'inset-y': scaleInset() }], /** * Start * @see https://tailwindcss.com/docs/top-right-bottom-left */ start: [{ start: scaleInset() }], /** * End * @see https://tailwindcss.com/docs/top-right-bottom-left */ end: [{ end: scaleInset() }], /** * Top * @see https://tailwindcss.com/docs/top-right-bottom-left */ top: [{ top: scaleInset() }], /** * Right * @see https://tailwindcss.com/docs/top-right-bottom-left */ right: [{ right: scaleInset() }], /** * Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ bottom: [{ bottom: scaleInset() }], /** * Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ left: [{ left: scaleInset() }], /** * Visibility * @see https://tailwindcss.com/docs/visibility */ visibility: ['visible', 'invisible', 'collapse'], /** * Z-Index * @see https://tailwindcss.com/docs/z-index */ z: [{ z: [isInteger, 'auto', isArbitraryVariable, isArbitraryValue] }], // ------------------------ // --- Flexbox and Grid --- // ------------------------ /** * Flex Basis * @see https://tailwindcss.com/docs/flex-basis */ basis: [ { basis: [ isFraction, 'full', 'auto', themeContainer, ...scaleUnambiguousSpacing(), ], }, ], /** * Flex Direction * @see https://tailwindcss.com/docs/flex-direction */ 'flex-direction': [{ flex: ['row', 'row-reverse', 'col', 'col-reverse'] }], /** * Flex Wrap * @see https://tailwindcss.com/docs/flex-wrap */ 'flex-wrap': [{ flex: ['nowrap', 'wrap', 'wrap-reverse'] }], /** * Flex * @see https://tailwindcss.com/docs/flex */ flex: [{ flex: [isNumber, isFraction, 'auto', 'initial', 'none', isArbitraryValue] }], /** * Flex Grow * @see https://tailwindcss.com/docs/flex-grow */ grow: [{ grow: ['', isNumber, isArbitraryVariable, isArbitraryValue] }], /** * Flex Shrink * @see https://tailwindcss.com/docs/flex-shrink */ shrink: [{ shrink: ['', isNumber, isArbitraryVariable, isArbitraryValue] }], /** * Order * @see https://tailwindcss.com/docs/order */ order: [ { order: [ isInteger, 'first', 'last', 'none', isArbitraryVariable, isArbitraryValue, ], }, ], /** * Grid Template Columns * @see https://tailwindcss.com/docs/grid-template-columns */ 'grid-cols': [{ 'grid-cols': scaleGridTemplateColsRows() }], /** * Grid Column Start / End * @see https://tailwindcss.com/docs/grid-column */ 'col-start-end': [{ col: scaleGridColRowStartAndEnd() }], /** * Grid Column Start * @see https://tailwindcss.com/docs/grid-column */ 'col-start': [{ 'col-start': scaleGridColRowStartOrEnd() }], /** * Grid Column End * @see https://tailwindcss.com/docs/grid-column */ 'col-end': [{ 'col-end': scaleGridColRowStartOrEnd() }], /** * Grid Template Rows * @see https://tailwindcss.com/docs/grid-template-rows */ 'grid-rows': [{ 'grid-rows': scaleGridTemplateColsRows() }], /** * Grid Row Start / End * @see https://tailwindcss.com/docs/grid-row */ 'row-start-end': [{ row: scaleGridColRowStartAndEnd() }], /** * Grid Row Start * @see https://tailwindcss.com/docs/grid-row */ 'row-start': [{ 'row-start': scaleGridColRowStartOrEnd() }], /** * Grid Row End * @see https://tailwindcss.com/docs/grid-row */ 'row-end': [{ 'row-end': scaleGridColRowStartOrEnd() }], /** * Grid Auto Flow * @see https://tailwindcss.com/docs/grid-auto-flow */ 'grid-flow': [{ 'grid-flow': ['row', 'col', 'dense', 'row-dense', 'col-dense'] }], /** * Grid Auto Columns * @see https://tailwindcss.com/docs/grid-auto-columns */ 'auto-cols': [{ 'auto-cols': scaleGridAutoColsRows() }], /** * Grid Auto Rows * @see https://tailwindcss.com/docs/grid-auto-rows */ 'auto-rows': [{ 'auto-rows': scaleGridAutoColsRows() }], /** * Gap * @see https://tailwindcss.com/docs/gap */ gap: [{ gap: scaleUnambiguousSpacing() }], /** * Gap X * @see https://tailwindcss.com/docs/gap */ 'gap-x': [{ 'gap-x': scaleUnambiguousSpacing() }], /** * Gap Y * @see https://tailwindcss.com/docs/gap */ 'gap-y': [{ 'gap-y': scaleUnambiguousSpacing() }], /** * Justify Content * @see https://tailwindcss.com/docs/justify-content */ 'justify-content': [{ justify: [...scaleAlignPrimaryAxis(), 'normal'] }], /** * Justify Items * @see https://tailwindcss.com/docs/justify-items */ 'justify-items': [{ 'justify-items': [...scaleAlignSecondaryAxis(), 'normal'] }], /** * Justify Self * @see https://tailwindcss.com/docs/justify-self */ 'justify-self': [{ 'justify-self': ['auto', ...scaleAlignSecondaryAxis()] }], /** * Align Content * @see https://tailwindcss.com/docs/align-content */ 'align-content': [{ content: ['normal', ...scaleAlignPrimaryAxis()] }], /** * Align Items * @see https://tailwindcss.com/docs/align-items */ 'align-items': [{ items: [...scaleAlignSecondaryAxis(), 'baseline'] }], /** * Align Self * @see https://tailwindcss.com/docs/align-self */ 'align-self': [{ self: ['auto', ...scaleAlignSecondaryAxis(), 'baseline'] }], /** * Place Content * @see https://tailwindcss.com/docs/place-content */ 'place-content': [{ 'place-content': scaleAlignPrimaryAxis() }], /** * Place Items * @see https://tailwindcss.com/docs/place-items */ 'place-items': [{ 'place-items': [...scaleAlignSecondaryAxis(), 'baseline'] }], /** * Place Self * @see https://tailwindcss.com/docs/place-self */ 'place-self': [{ 'place-self': ['auto', ...scaleAlignSecondaryAxis()] }], // Spacing /** * Padding * @see https://tailwindcss.com/docs/padding */ p: [{ p: scaleUnambiguousSpacing() }], /** * Padding X * @see https://tailwindcss.com/docs/padding */ px: [{ px: scaleUnambiguousSpacing() }], /** * Padding Y * @see https://tailwindcss.com/docs/padding */ py: [{ py: scaleUnambiguousSpacing() }], /** * Padding Start * @see https://tailwindcss.com/docs/padding */ ps: [{ ps: scaleUnambiguousSpacing() }], /** * Padding End * @see https://tailwindcss.com/docs/padding */ pe: [{ pe: scaleUnambiguousSpacing() }], /** * Padding Top * @see https://tailwindcss.com/docs/padding */ pt: [{ pt: scaleUnambiguousSpacing() }], /** * Padding Right * @see https://tailwindcss.com/docs/padding */ pr: [{ pr: scaleUnambiguousSpacing() }], /** * Padding Bottom * @see https://tailwindcss.com/docs/padding */ pb: [{ pb: scaleUnambiguousSpacing() }], /** * Padding Left * @see https://tailwindcss.com/docs/padding */ pl: [{ pl: scaleUnambiguousSpacing() }], /** * Margin * @see https://tailwindcss.com/docs/margin */ m: [{ m: scaleMargin() }], /** * Margin X * @see https://tailwindcss.com/docs/margin */ mx: [{ mx: scaleMargin() }], /** * Margin Y * @see https://tailwindcss.com/docs/margin */ my: [{ my: scaleMargin() }], /** * Margin Start * @see https://tailwindcss.com/docs/margin */ ms: [{ ms: scaleMargin() }], /** * Margin End * @see https://tailwindcss.com/docs/margin */ me: [{ me: scaleMargin() }], /** * Margin Top * @see https://tailwindcss.com/docs/margin */ mt: [{ mt: scaleMargin() }], /** * Margin Right * @see https://tailwindcss.com/docs/margin */ mr: [{ mr: scaleMargin() }], /** * Margin Bottom * @see https://tailwindcss.com/docs/margin */ mb: [{ mb: scaleMargin() }], /** * Margin Left * @see https://tailwindcss.com/docs/margin */ ml: [{ ml: scaleMargin() }], /** * Space Between X * @see https://tailwindcss.com/docs/margin#adding-space-between-children */ 'space-x': [{ 'space-x': scaleUnambiguousSpacing() }], /** * Space Between X Reverse * @see https://tailwindcss.com/docs/margin#adding-space-between-children */ 'space-x-reverse': ['space-x-reverse'], /** * Space Between Y * @see https://tailwindcss.com/docs/margin#adding-space-between-children */ 'space-y': [{ 'space-y': scaleUnambiguousSpacing() }], /** * Space Between Y Reverse * @see https://tailwindcss.com/docs/margin#adding-space-between-children */ 'space-y-reverse': ['space-y-reverse'], // -------------- // --- Sizing --- // -------------- /** * Size * @see https://tailwindcss.com/docs/width#setting-both-width-and-height */ size: [{ size: scaleSizing() }], /** * Width * @see https://tailwindcss.com/docs/width */ w: [{ w: [themeContainer, 'screen', ...scaleSizing()] }], /** * Min-Width * @see https://tailwindcss.com/docs/min-width */ 'min-w': [ { 'min-w': [ themeContainer, 'screen', /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */ 'none', ...scaleSizing(), ], }, ], /** * Max-Width * @see https://tailwindcss.com/docs/max-width */ 'max-w': [ { 'max-w': [ themeContainer, 'screen', 'none', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */ 'prose', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */ { screen: [themeBreakpoint] }, ...scaleSizing(), ], }, ], /** * Height * @see https://tailwindcss.com/docs/height */ h: [{ h: ['screen', ...scaleSizing()] }], /** * Min-Height * @see https://tailwindcss.com/docs/min-height */ 'min-h': [{ 'min-h': ['screen', 'none', ...scaleSizing()] }], /** * Max-Height * @see https://tailwindcss.com/docs/max-height */ 'max-h': [{ 'max-h': ['screen', ...scaleSizing()] }], // ------------------ // --- Typography --- // ------------------ /** * Font Size * @see https://tailwindcss.com/docs/font-size */ 'font-size': [ { text: ['base', themeText, isArbitraryVariableLength, isArbitraryLength] }, ], /** * Font Smoothing * @see https://tailwindcss.com/docs/font-smoothing */ 'font-smoothing': ['antialiased', 'subpixel-antialiased'], /** * Font Style * @see https://tailwindcss.com/docs/font-style */ 'font-style': ['italic', 'not-italic'], /** * Font Weight * @see https://tailwindcss.com/docs/font-weight */ 'font-weight': [{ font: [themeFontWeight, isArbitraryVariable, isArbitraryNumber] }], /** * Font Stretch * @see https://tailwindcss.com/docs/font-stretch */ 'font-stretch': [ { 'font-stretch': [ 'ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded', isPercent, isArbitraryValue, ], }, ], /** * Font Family * @see https://tailwindcss.com/docs/font-family */ 'font-family': [{ font: [isArbitraryVariableFamilyName, isArbitraryValue, themeFont] }], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-normal': ['normal-nums'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-ordinal': ['ordinal'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-slashed-zero': ['slashed-zero'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-figure': ['lining-nums', 'oldstyle-nums'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-spacing': ['proportional-nums', 'tabular-nums'], /** * Font Variant Numeric * @see https://tailwindcss.com/docs/font-variant-numeric */ 'fvn-fraction': ['diagonal-fractions', 'stacked-fractions'], /** * Letter Spacing * @see https://tailwindcss.com/docs/letter-spacing */ tracking: [{ tracking: [themeTracking, isArbitraryVariable, isArbitraryValue] }], /** * Line Clamp * @see https://tailwindcss.com/docs/line-clamp */ 'line-clamp': [ { 'line-clamp': [isNumber, 'none', isArbitraryVariable, isArbitraryNumber] }, ], /** * Line Height * @see https://tailwindcss.com/docs/line-height */ leading: [ { leading: [ /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */ themeLeading, ...scaleUnambiguousSpacing(), ], }, ], /** * List Style Image * @see https://tailwindcss.com/docs/list-style-image */ 'list-image': [{ 'list-image': ['none', isArbitraryVariable, isArbitraryValue] }], /** * List Style Position * @see https://tailwindcss.com/docs/list-style-position */ 'list-style-position': [{ list: ['inside', 'outside'] }], /** * List Style Type * @see https://tailwindcss.com/docs/list-style-type */ 'list-style-type': [ { list: ['disc', 'decimal', 'none', isArbitraryVariable, isArbitraryValue] }, ], /** * Text Alignment * @see https://tailwindcss.com/docs/text-align */ 'text-alignment': [{ text: ['left', 'center', 'right', 'justify', 'start', 'end'] }], /** * Placeholder Color * @deprecated since Tailwind CSS v3.0.0 * @see https://v3.tailwindcss.com/docs/placeholder-color */ 'placeholder-color': [{ placeholder: scaleColor() }], /** * Text Color * @see https://tailwindcss.com/docs/text-color */ 'text-color': [{ text: scaleColor() }], /** * Text Decoration * @see https://tailwindcss.com/docs/text-decoration */ 'text-decoration': ['underline', 'overline', 'line-through', 'no-underline'], /** * Text Decoration Style * @see https://tailwindcss.com/docs/text-decoration-style */ 'text-decoration-style': [{ decoration: [...scaleLineStyle(), 'wavy'] }], /** * Text Decoration Thickness * @see https://tailwindcss.com/docs/text-decoration-thickness */ 'text-decoration-thickness': [ { decoration: [ isNumber, 'from-font', 'auto', isArbitraryVariable, isArbitraryLength, ], }, ], /** * Text Decoration Color * @see https://tailwindcss.com/docs/text-decoration-color */ 'text-decoration-color': [{ decoration: scaleColor() }], /** * Text Underline Offset * @see https://tailwindcss.com/docs/text-underline-offset */ 'underline-offset': [ { 'underline-offset': [isNumber, 'auto', isArbitraryVariable, isArbitraryValue] }, ], /** * Text Transform * @see https://tailwindcss.com/docs/text-transform */ 'text-transform': ['uppercase', 'lowercase', 'capitalize', 'normal-case'], /** * Text Overflow * @see https://tailwindcss.com/docs/text-overflow */ 'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'], /** * Text Wrap * @see https://tailwindcss.com/docs/text-wrap */ 'text-wrap': [{ text: ['wrap', 'nowrap', 'balance', 'pretty'] }], /** * Text Indent * @see https://tailwindcss.com/docs/text-indent */ indent: [{ indent: scaleUnambiguousSpacing() }], /** * Vertical Alignment * @see https://tailwindcss.com/docs/vertical-align */ 'vertical-align': [ { align: [ 'baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', isArbitraryVariable, isArbitraryValue, ], }, ], /** * Whitespace * @see https://tailwindcss.com/docs/whitespace */ whitespace: [ { whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] }, ], /** * Word Break * @see https://tailwindcss.com/docs/word-break */ break: [{ break: ['normal', 'words', 'all', 'keep'] }], /** * Hyphens * @see https://tailwindcss.com/docs/hyphens */ hyphens: [{ hyphens: ['none', 'manual', 'auto'] }], /** * Content * @see https://tailwindcss.com/docs/content */ content: [{ content: ['none', isArbitraryVariable, isArbitraryValue] }], // ------------------- // --- Backgrounds --- // ------------------- /** * Background Attachment * @see https://tailwindcss.com/docs/background-attachment */ 'bg-attachment': [{ bg: ['fixed', 'local', 'scroll'] }], /** * Background Clip * @see https://tailwindcss.com/docs/background-clip */ 'bg-clip': [{ 'bg-clip': ['border', 'padding', 'content', 'text'] }], /** * Background Origin * @see https://tailwindcss.com/docs/background-origin */ 'bg-origin': [{ 'bg-origin': ['border', 'padding', 'content'] }], /** * Background Position * @see https://tailwindcss.com/docs/background-position */ 'bg-position': [ { bg: [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition] }, ], /** * Background Repeat * @see https://tailwindcss.com/docs/background-repeat */ 'bg-repeat': [{ bg: ['no-repeat', { repeat: ['', 'x', 'y', 'space', 'round'] }] }], /** * Background Size * @see https://tailwindcss.com/docs/background-size */ 'bg-size': [ { bg: ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize] }, ], /** * Background Image * @see https://tailwindcss.com/docs/background-image */ 'bg-image': [ { bg: [ 'none', { linear: [ { to: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] }, isInteger, isArbitraryVariable, isArbitraryValue, ], radial: ['', isArbitraryVariable, isArbitraryValue], conic: [isInteger, isArbitraryVariable, isArbitraryValue], }, isArbitraryVariableImage, isArbitraryImage, ], }, ], /** * Background Color * @see https://tailwindcss.com/docs/background-color */ 'bg-color': [{ bg: scaleColor() }], /** * Gradient Color Stops From Position * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-from-pos': [{ from: scaleGradientStopPosition() }], /** * Gradient Color Stops Via Position * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-via-pos': [{ via: scaleGradientStopPosition() }], /** * Gradient Color Stops To Position * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-to-pos': [{ to: scaleGradientStopPosition() }], /** * Gradient Color Stops From * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-from': [{ from: scaleColor() }], /** * Gradient Color Stops Via * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-via': [{ via: scaleColor() }], /** * Gradient Color Stops To * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-to': [{ to: scaleColor() }], // --------------- // --- Borders --- // --------------- /** * Border Radius * @see https://tailwindcss.com/docs/border-radius */ rounded: [{ rounded: scaleRadius() }], /** * Border Radius Start * @see https://tailwindcss.com/docs/border-radius */ 'rounded-s': [{ 'rounded-s': scaleRadius() }], /** * Border Radius End * @see https://tailwindcss.com/docs/border-radius */ 'rounded-e': [{ 'rounded-e': scaleRadius() }], /** * Border Radius Top * @see https://tailwindcss.com/docs/border-radius */ 'rounded-t': [{ 'rounded-t': scaleRadius() }], /** * Border Radius Right * @see https://tailwindcss.com/docs/border-radius */ 'rounded-r': [{ 'rounded-r': scaleRadius() }], /** * Border Radius Bottom * @see https://tailwindcss.com/docs/border-radius */ 'rounded-b': [{ 'rounded-b': scaleRadius() }], /** * Border Radius Left * @see https://tailwindcss.com/docs/border-radius */ 'rounded-l': [{ 'rounded-l': scaleRadius() }], /** * Border Radius Start Start * @see https://tailwindcss.com/docs/border-radius */ 'rounded-ss': [{ 'rounded-ss': scaleRadius() }], /** * Border Radius Start End * @see https://tailwindcss.com/docs/border-radius */ 'rounded-se': [{ 'rounded-se': scaleRadius() }], /** * Border Radius End End * @see https://tailwindcss.com/docs/border-radius */ 'rounded-ee': [{ 'rounded-ee': scaleRadius() }], /** * Border Radius End Start * @see https://tailwindcss.com/docs/border-radius */ 'rounded-es': [{ 'rounded-es': scaleRadius() }], /** * Border Radius Top Left * @see https://tailwindcss.com/docs/border-radius */ 'rounded-tl': [{ 'rounded-tl': scaleRadius() }], /** * Border Radius Top Right * @see https://tailwindcss.com/docs/border-radius */ 'rounded-tr': [{ 'rounded-tr': scaleRadius() }], /** * Border Radius Bottom Right * @see https://tailwindcss.com/docs/border-radius */ 'rounded-br': [{ 'rounded-br': scaleRadius() }], /** * Border Radius Bottom Left * @see https://tailwindcss.com/docs/border-radius */ 'rounded-bl': [{ 'rounded-bl': scaleRadius() }], /** * Border Width * @see https://tailwindcss.com/docs/border-width */ 'border-w': [{ border: scaleBorderWidth() }], /** * Border Width X * @see https://tailwindcss.com/docs/border-width */ 'border-w-x': [{ 'border-x': scaleBorderWidth() }], /** * Border Width Y * @see https://tailwindcss.com/docs/border-width */ 'border-w-y': [{ 'border-y': scaleBorderWidth() }], /** * Border Width Start * @see https://tailwindcss.com/docs/border-width */ 'border-w-s': [{ 'border-s': scaleBorderWidth() }], /** * Border Width End * @see https://tailwindcss.com/docs/border-width */ 'border-w-e': [{ 'border-e': scaleBorderWidth() }], /** * Border Width Top * @see https://tailwindcss.com/docs/border-width */ 'border-w-t': [{ 'border-t': scaleBorderWidth() }], /** * Border Width Right * @see https://tailwindcss.com/docs/border-width */ 'border-w-r': [{ 'border-r': scaleBorderWidth() }], /** * Border Width Bottom * @see https://tailwindcss.com/docs/border-width */ 'border-w-b': [{ 'border-b': scaleBorderWidth() }], /** * Border Width Left * @see https://tailwindcss.com/docs/border-width */ 'border-w-l': [{ 'border-l': scaleBorderWidth() }], /** * Divide Width X * @see https://tailwindcss.com/docs/border-width#between-children */ 'divide-x': [{ 'divide-x': scaleBorderWidth() }], /** * Divide Width X Reverse * @see https://tailwindcss.com/docs/border-width#between-children */ 'divide-x-reverse': ['divide-x-reverse'], /** * Divide Width Y * @see https://tailwindcss.com/docs/border-width#between-children */ 'divide-y': [{ 'divide-y': scaleBorderWidth() }], /** * Divide Width Y Reverse * @see https://tailwindcss.com/docs/border-width#between-children */ 'divide-y-reverse': ['divide-y-reverse'], /** * Border Style * @see https://tailwindcss.com/docs/border-style */ 'border-style': [{ border: [...scaleLineStyle(), 'hidden', 'none'] }], /** * Divide Style * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style */ 'divide-style': [{ divide: [...scaleLineStyle(), 'hidden', 'none'] }], /** * Border Color * @see https://tailwindcss.com/docs/border-color */ 'border-color': [{ border: scaleColor() }], /** * Border Color X * @see https://tailwindcss.com/docs/border-color */ 'border-color-x': [{ 'border-x': scaleColor() }], /** * Border Color Y * @see https://tailwindcss.com/docs/border-color */ 'border-color-y': [{ 'border-y': scaleColor() }], /** * Border Color S * @see https://tailwindcss.com/docs/border-color */ 'border-color-s': [{ 'border-s': scaleColor() }], /** * Border Color E * @see https://tailwindcss.com/docs/border-color */ 'border-color-e': [{ 'border-e': scaleColor() }], /** * Border Color Top * @see https://tailwindcss.com/docs/border-color */ 'border-color-t': [{ 'border-t': scaleColor() }], /** * Border Color Right * @see https://tailwindcss.com/docs/border-color */ 'border-color-r': [{ 'border-r': scaleColor() }], /** * Border Color Bottom * @see https://tailwindcss.com/docs/border-color */ 'border-color-b': [{ 'border-b': scaleColor() }], /** * Border Color Left * @see https://tailwindcss.com/docs/border-color */ 'border-color-l': [{ 'border-l': scaleColor() }], /** * Divide Color * @see https://tailwindcss.com/docs/divide-color */ 'divide-color': [{ divide: scaleColor() }], /** * Outline Style * @see https://tailwindcss.com/docs/outline-style */ 'outline-style': [{ outline: [...scaleLineStyle(), 'none', 'hidden'] }], /** * Outline Offset * @see https://tailwindcss.com/docs/outline-offset */ 'outline-offset': [ { 'outline-offset': [isNumber, isArbitraryVariable, isArbitraryValue] }, ], /** * Outline Width * @see https://tailwindcss.com/docs/outline-width */ 'outline-w': [ { outline: ['', isNumber, isArbitraryVariableLength, isArbitraryLength] }, ], /** * Outline Color * @see https://tailwindcss.com/docs/outline-color */ 'outline-color': [{ outline: [themeColor] }], // --------------- // --- Effects --- // --------------- /** * Box Shadow * @see https://tailwindcss.com/docs/box-shadow */ shadow: [ { shadow: [ // Deprecated since Tailwind CSS v4.0.0 '', 'none', themeShadow, isArbitraryVariableShadow, isArbitraryShadow, ], }, ], /** * Box Shadow Color * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color */ 'shadow-color': [{ shadow: scaleColor() }], /** * Inset Box Shadow * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow */ 'inset-shadow': [ { 'inset-shadow': [ 'none', isArbitraryVariable, isArbitraryValue, themeInsetShadow, ], },