ivt
Version:
Ivt Components Library
4,492 lines • 134 kB
JavaScript
const CLASS_PART_SEPARATOR = '-';
const createClassGroupUtils = (config)=>{
const classMap = createClassMap(config);
const { conflictingClassGroups, conflictingClassGroupModifiers } = config;
const getClassGroupId = (className)=>{
const classParts = className.split(CLASS_PART_SEPARATOR);
// Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and remove it from classParts.
if (classParts[0] === '' && classParts.length !== 1) {
classParts.shift();
}
return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
};
const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier)=>{
const conflicts = conflictingClassGroups[classGroupId] || [];
if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
return [
...conflicts,
...conflictingClassGroupModifiers[classGroupId]
];
}
return conflicts;
};
return {
getClassGroupId,
getConflictingClassGroupIds
};
};
const getGroupRecursive = (classParts, classPartObject)=>{
if (classParts.length === 0) {
return classPartObject.classGroupId;
}
const currentClassPart = classParts[0];
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined;
if (classGroupFromNextClassPart) {
return classGroupFromNextClassPart;
}
if (classPartObject.validators.length === 0) {
return undefined;
}
const classRest = classParts.join(CLASS_PART_SEPARATOR);
return classPartObject.validators.find(({ validator })=>validator(classRest))?.classGroupId;
};
const arbitraryPropertyRegex = /^\[(.+)\]$/;
const getGroupIdForArbitraryProperty = (className)=>{
if (arbitraryPropertyRegex.test(className)) {
const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(':'));
if (property) {
// I use two dots here because one dot is used as prefix for class groups in plugins
return 'arbitrary..' + property;
}
}
};
/**
* Exported for testing only
*/ const createClassMap = (config)=>{
const { theme, classGroups } = config;
const classMap = {
nextPart: new Map(),
validators: []
};
for(const classGroupId in classGroups){
processClassesRecursively(classGroups[classGroupId], classMap, classGroupId, theme);
}
return classMap;
};
const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme)=>{
classGroup.forEach((classDefinition)=>{
if (typeof classDefinition === 'string') {
const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
classPartObjectToEdit.classGroupId = classGroupId;
return;
}
if (typeof classDefinition === 'function') {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
return;
}
classPartObject.validators.push({
validator: classDefinition,
classGroupId
});
return;
}
Object.entries(classDefinition).forEach(([key, classGroup])=>{
processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme);
});
});
};
const getPart = (classPartObject, path)=>{
let currentClassPartObject = classPartObject;
path.split(CLASS_PART_SEPARATOR).forEach((pathPart)=>{
if (!currentClassPartObject.nextPart.has(pathPart)) {
currentClassPartObject.nextPart.set(pathPart, {
nextPart: new Map(),
validators: []
});
}
currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
});
return currentClassPartObject;
};
const isThemeGetter = (func)=>func.isThemeGetter;
// LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance
const createLruCache = (maxCacheSize)=>{
if (maxCacheSize < 1) {
return {
get: ()=>undefined,
set: ()=>{}
};
}
let cacheSize = 0;
let cache = new Map();
let previousCache = new Map();
const update = (key, value)=>{
cache.set(key, value);
cacheSize++;
if (cacheSize > maxCacheSize) {
cacheSize = 0;
previousCache = cache;
cache = new Map();
}
};
return {
get (key) {
let value = cache.get(key);
if (value !== undefined) {
return value;
}
if ((value = previousCache.get(key)) !== undefined) {
update(key, value);
return value;
}
},
set (key, value) {
if (cache.has(key)) {
cache.set(key, value);
} else {
update(key, value);
}
}
};
};
const IMPORTANT_MODIFIER = '!';
const MODIFIER_SEPARATOR = ':';
const MODIFIER_SEPARATOR_LENGTH = MODIFIER_SEPARATOR.length;
const createParseClassName = (config)=>{
const { prefix, experimentalParseClassName } = config;
/**
* Parse class name into parts.
*
* Inspired by `splitAtTopLevelOnly` used in Tailwind CSS
* @see https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
*/ let parseClassName = (className)=>{
const modifiers = [];
let bracketDepth = 0;
let parenDepth = 0;
let modifierStart = 0;
let postfixModifierPosition;
for(let index = 0; index < className.length; index++){
let currentCharacter = className[index];
if (bracketDepth === 0 && parenDepth === 0) {
if (currentCharacter === MODIFIER_SEPARATOR) {
modifiers.push(className.slice(modifierStart, index));
modifierStart = index + MODIFIER_SEPARATOR_LENGTH;
continue;
}
if (currentCharacter === '/') {
postfixModifierPosition = index;
continue;
}
}
if (currentCharacter === '[') {
bracketDepth++;
} else if (currentCharacter === ']') {
bracketDepth--;
} else if (currentCharacter === '(') {
parenDepth++;
} else if (currentCharacter === ')') {
parenDepth--;
}
}
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
const baseClassName = stripImportantModifier(baseClassNameWithImportantModifier);
const hasImportantModifier = baseClassName !== baseClassNameWithImportantModifier;
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
return {
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition
};
};
if (prefix) {
const fullPrefix = prefix + MODIFIER_SEPARATOR;
const parseClassNameOriginal = parseClassName;
parseClassName = (className)=>className.startsWith(fullPrefix) ? parseClassNameOriginal(className.substring(fullPrefix.length)) : {
isExternal: true,
modifiers: [],
hasImportantModifier: false,
baseClassName: className,
maybePostfixModifierPosition: undefined
};
}
if (experimentalParseClassName) {
const parseClassNameOriginal = parseClassName;
parseClassName = (className)=>experimentalParseClassName({
className,
parseClassName: parseClassNameOriginal
});
}
return parseClassName;
};
const stripImportantModifier = (baseClassName)=>{
if (baseClassName.endsWith(IMPORTANT_MODIFIER)) {
return baseClassName.substring(0, baseClassName.length - 1);
}
/**
* In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
* @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
*/ if (baseClassName.startsWith(IMPORTANT_MODIFIER)) {
return baseClassName.substring(1);
}
return baseClassName;
};
/**
* Sorts modifiers according to following schema:
* - Predefined modifiers are sorted alphabetically
* - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
*/ const createSortModifiers = (config)=>{
const orderSensitiveModifiers = Object.fromEntries(config.orderSensitiveModifiers.map((modifier)=>[
modifier,
true
]));
const sortModifiers = (modifiers)=>{
if (modifiers.length <= 1) {
return modifiers;
}
const sortedModifiers = [];
let unsortedModifiers = [];
modifiers.forEach((modifier)=>{
const isPositionSensitive = modifier[0] === '[' || orderSensitiveModifiers[modifier];
if (isPositionSensitive) {
sortedModifiers.push(...unsortedModifiers.sort(), modifier);
unsortedModifiers = [];
} else {
unsortedModifiers.push(modifier);
}
});
sortedModifiers.push(...unsortedModifiers.sort());
return sortedModifiers;
};
return sortModifiers;
};
const createConfigUtils = (config)=>({
cache: createLruCache(config.cacheSize),
parseClassName: createParseClassName(config),
sortModifiers: createSortModifiers(config),
...createClassGroupUtils(config)
});
const SPLIT_CLASSES_REGEX = /\s+/;
const mergeClassList = (classList, configUtils)=>{
const { parseClassName, getClassGroupId, getConflictingClassGroupIds, sortModifiers } = configUtils;
/**
* Set of classGroupIds in following format:
* `{importantModifier}{variantModifiers}{classGroupId}`
* @example 'float'
* @example 'hover:focus:bg-color'
* @example 'md:!pr'
*/ const classGroupsInConflict = [];
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
let result = '';
for(let index = classNames.length - 1; index >= 0; index -= 1){
const originalClassName = classNames[index];
const { isExternal, modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition } = parseClassName(originalClassName);
if (isExternal) {
result = originalClassName + (result.length > 0 ? ' ' + result : result);
continue;
}
let hasPostfixModifier = !!maybePostfixModifierPosition;
let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
if (!classGroupId) {
if (!hasPostfixModifier) {
// Not a Tailwind class
result = originalClassName + (result.length > 0 ? ' ' + result : result);
continue;
}
classGroupId = getClassGroupId(baseClassName);
if (!classGroupId) {
// Not a Tailwind class
result = originalClassName + (result.length > 0 ? ' ' + result : result);
continue;
}
hasPostfixModifier = false;
}
const variantModifier = sortModifiers(modifiers).join(':');
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
const classId = modifierId + classGroupId;
if (classGroupsInConflict.includes(classId)) {
continue;
}
classGroupsInConflict.push(classId);
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
for(let i = 0; i < conflictGroups.length; ++i){
const group = conflictGroups[i];
classGroupsInConflict.push(modifierId + group);
}
// Tailwind class not in conflict
result = originalClassName + (result.length > 0 ? ' ' + result : result);
}
return result;
};
/**
* The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
*
* Specifically:
* - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
* - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
*
* Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
*/ function twJoin() {
let index = 0;
let argument;
let resolvedValue;
let string = '';
while(index < arguments.length){
if (argument = arguments[index++]) {
if (resolvedValue = toValue(argument)) {
string && (string += ' ');
string += resolvedValue;
}
}
}
return string;
}
const toValue = (mix)=>{
if (typeof mix === 'string') {
return mix;
}
let resolvedValue;
let string = '';
for(let k = 0; k < mix.length; k++){
if (mix[k]) {
if (resolvedValue = toValue(mix[k])) {
string && (string += ' ');
string += resolvedValue;
}
}
}
return string;
};
function createTailwindMerge(createConfigFirst, ...createConfigRest) {
let configUtils;
let cacheGet;
let cacheSet;
let functionToCall = initTailwindMerge;
function initTailwindMerge(classList) {
const config = createConfigRest.reduce((previousConfig, createConfigCurrent)=>createConfigCurrent(previousConfig), createConfigFirst());
configUtils = createConfigUtils(config);
cacheGet = configUtils.cache.get;
cacheSet = configUtils.cache.set;
functionToCall = tailwindMerge;
return tailwindMerge(classList);
}
function tailwindMerge(classList) {
const cachedResult = cacheGet(classList);
if (cachedResult) {
return cachedResult;
}
const result = mergeClassList(classList, configUtils);
cacheSet(classList, result);
return result;
}
return function callTailwindMerge() {
return functionToCall(twJoin.apply(null, arguments));
};
}
const fromTheme = (key)=>{
const themeGetter = (theme)=>theme[key] || [];
themeGetter.isThemeGetter = true;
return themeGetter;
};
const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
const fractionRegex = /^\d+\/\d+$/;
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
// Shadow always begins with x and y offset separated by underscore optionally prepended by inset
const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
const isFraction = (value)=>fractionRegex.test(value);
const isNumber = (value)=>!!value && !Number.isNaN(Number(value));
const isInteger = (value)=>!!value && Number.isInteger(Number(value));
const isPercent = (value)=>value.endsWith('%') && isNumber(value.slice(0, -1));
const isTshirtSize = (value)=>tshirtUnitRegex.test(value);
const isAny = ()=>true;
const isLengthOnly = (value)=>// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
// For example, `hsl(0 0% 0%)` would be classified as a length without this check.
// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
lengthUnitRegex.test(value) && !colorFunctionRegex.test(value);
const isNever = ()=>false;
const isShadow = (value)=>shadowRegex.test(value);
const isImage = (value)=>imageRegex.test(value);
const isAnyNonArbitrary = (value)=>!isArbitraryValue(value) && !isArbitraryVariable(value);
const isArbitrarySize = (value)=>getIsArbitraryValue(value, isLabelSize, isNever);
const isArbitraryValue = (value)=>arbitraryValueRegex.test(value);
const isArbitraryLength = (value)=>getIsArbitraryValue(value, isLabelLength, isLengthOnly);
const isArbitraryNumber = (value)=>getIsArbitraryValue(value, isLabelNumber, isNumber);
const isArbitraryPosition = (value)=>getIsArbitraryValue(value, isLabelPosition, isNever);
const isArbitraryImage = (value)=>getIsArbitraryValue(value, isLabelImage, isImage);
const isArbitraryShadow = (value)=>getIsArbitraryValue(value, isLabelShadow, isShadow);
const isArbitraryVariable = (value)=>arbitraryVariableRegex.test(value);
const isArbitraryVariableLength = (value)=>getIsArbitraryVariable(value, isLabelLength);
const isArbitraryVariableFamilyName = (value)=>getIsArbitraryVariable(value, isLabelFamilyName);
const isArbitraryVariablePosition = (value)=>getIsArbitraryVariable(value, isLabelPosition);
const isArbitraryVariableSize = (value)=>getIsArbitraryVariable(value, isLabelSize);
const isArbitraryVariableImage = (value)=>getIsArbitraryVariable(value, isLabelImage);
const isArbitraryVariableShadow = (value)=>getIsArbitraryVariable(value, isLabelShadow, true);
// Helpers
const getIsArbitraryValue = (value, testLabel, testValue)=>{
const result = arbitraryValueRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return testValue(result[2]);
}
return false;
};
const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false)=>{
const result = arbitraryVariableRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return shouldMatchNoLabel;
}
return false;
};
// Labels
const isLabelPosition = (label)=>label === 'position' || label === 'percentage';
const isLabelImage = (label)=>label === 'image' || label === 'url';
const isLabelSize = (label)=>label === 'length' || label === 'size' || label === 'bg-size';
const isLabelLength = (label)=>label === 'length';
const isLabelNumber = (label)=>label === 'number';
const isLabelFamilyName = (label)=>label === 'family-name';
const isLabelShadow = (label)=>label === 'shadow';
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 themeTextShadow = fromTheme('text-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'
];
const scalePosition = ()=>[
'center',
'top',
'bottom',
'left',
'right',
'top-left',
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
'left-top',
'top-right',
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
'right-top',
'bottom-right',
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
'right-bottom',
'bottom-left',
// Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
'left-bottom'
];
const scalePositionWithArbitrary = ()=>[
...scalePosition(),
isArbitraryVariable,
isArbitraryValue
];
const scaleOverflow = ()=>[
'auto',
'hidden',
'clip',
'visible',
'scroll'
];
const scaleOverscroll = ()=>[
'auto',
'contain',
'none'
];
const scaleUnambiguousSpacing = ()=>[
isArbitraryVariable,
isArbitraryValue,
themeSpacing
];
const scaleInset = ()=>[
isFraction,
'full',
'auto',
...scaleUnambiguousSpacing()
];
const scaleGridTemplateColsRows = ()=>[
isInteger,
'none',
'subgrid',
isArbitraryVariable,
isArbitraryValue
];
const scaleGridColRowStartAndEnd = ()=>[
'auto',
{
span: [
'full',
isInteger,
isArbitraryVariable,
isArbitraryValue
]
},
isInteger,
isArbitraryVariable,
isArbitraryValue
];
const scaleGridColRowStartOrEnd = ()=>[
isInteger,
'auto',
isArbitraryVariable,
isArbitraryValue
];
const scaleGridAutoColsRows = ()=>[
'auto',
'min',
'max',
'fr',
isArbitraryVariable,
isArbitraryValue
];
const scaleAlignPrimaryAxis = ()=>[
'start',
'end',
'center',
'between',
'around',
'evenly',
'stretch',
'baseline',
'center-safe',
'end-safe'
];
const scaleAlignSecondaryAxis = ()=>[
'start',
'end',
'center',
'stretch',
'center-safe',
'end-safe'
];
const scaleMargin = ()=>[
'auto',
...scaleUnambiguousSpacing()
];
const scaleSizing = ()=>[
isFraction,
'auto',
'full',
'dvw',
'dvh',
'lvw',
'lvh',
'svw',
'svh',
'min',
'max',
'fit',
...scaleUnambiguousSpacing()
];
const scaleColor = ()=>[
themeColor,
isArbitraryVariable,
isArbitraryValue
];
const scaleBgPosition = ()=>[
...scalePosition(),
isArbitraryVariablePosition,
isArbitraryPosition,
{
position: [
isArbitraryVariable,
isArbitraryValue
]
}
];
const scaleBgRepeat = ()=>[
'no-repeat',
{
repeat: [
'',
'x',
'y',
'space',
'round'
]
}
];
const scaleBgSize = ()=>[
'auto',
'cover',
'contain',
isArbitraryVariableSize,
isArbitrarySize,
{
size: [
isArbitraryVariable,
isArbitraryValue
]
}
];
const scaleGradientStopPosition = ()=>[
isPercent,
isArbitraryVariableLength,
isArbitraryLength
];
const scaleRadius = ()=>[
// Deprecated since Tailwind CSS v4.0.0
'',
'none',
'full',
themeRadius,
isArbitraryVariable,
isArbitraryValue
];
const scaleBorderWidth = ()=>[
'',
isNumber,
isArbitraryVariableLength,
isArbitraryLength
];
const scaleLineStyle = ()=>[
'solid',
'dashed',
'dotted',
'double'
];
const scaleBlendMode = ()=>[
'normal',
'multiply',
'screen',
'overlay',
'darken',
'lighten',
'color-dodge',
'color-burn',
'hard-light',
'soft-light',
'difference',
'exclusion',
'hue',
'saturation',
'color',
'luminosity'
];
const scaleMaskImagePosition = ()=>[
isNumber,
isPercent,
isArbitraryVariablePosition,
isArbitraryPosition
];
const scaleBlur = ()=>[
// Deprecated since Tailwind CSS v4.0.0
'',
'none',
themeBlur,
isArbitraryVariable,
isArbitraryValue
];
const scaleRotate = ()=>[
'none',
isNumber,
isArbitraryVariable,
isArbitraryValue
];
const scaleScale = ()=>[
'none',
isNumber,
isArbitraryVariable,
isArbitraryValue
];
const scaleSkew = ()=>[
isNumber,
isArbitraryVariable,
isArbitraryValue
];
const scaleTranslate = ()=>[
isFraction,
'full',
...scaleUnambiguousSpacing()
];
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
],
'text-shadow': [
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: scalePositionWithArbitrary()
}
],
/**
* 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: [
'',
'last'
]
}
]
}
],
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/ 'align-self': [
{
self: [
'auto',
...scaleAlignSecondaryAxis(),
{
baseline: [
'',
'last'
]
}
]
}
],
/**
* 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',
'lh',
...scaleSizing()
]
}
],
/**
* Min-Height
* @see https://tailwindcss.com/docs/min-height
*/ 'min-h': [
{
'min-h': [
'screen',
'lh',
'none',
...scaleSizing()
]
}
],
/**
* Max-Height
* @see https://tailwindcss.com/docs/max-height
*/ 'max-h': [
{
'max-h': [
'screen',
'lh',
...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'
]
}
],
/**
* Overflow Wrap
* @see https://tailwindcss.com/docs/overflow-wrap
*/ wrap: [
{
wrap: [
'break-word',
'anywhere',
'normal'
]
}
],
/**
* 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: scaleBgPosition()
}
],
/**
* Background Repeat
* @see https://tailwindcss.com/docs/background-repeat
*/ 'bg-repeat': [
{
bg: scaleBgRepeat()
}
],
/**
* Background Size
* @see https://tailwindcss.com/docs/background-size
*/ 'bg-size': [
{
bg: scaleBgSize()
}
],
/**
* 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: scaleColor()
}
],
// ---------------
// --- 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',
themeInsetShadow,
isArbitraryVariableShadow,
isArbitraryShadow
]
}
],
/**
* Inset Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
*/ 'inset-shadow-color': [
{
'inset-shadow': scaleColor()
}
],
/**
* Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
*/ 'ring-w': [
{
ring: scaleBorderWidth()
}
],
/**
* Ring Width Inset
* @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
* @deprecated since Tailwind CSS v4.0.0
* @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
*/ 'ring-w-inset': [
'ring-inset'
],
/**
* Ring Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
*/ 'ring-color': [
{
ring: scaleColor()
}
],
/**
* Ring Offset Width
* @see https://v3.tailwindcss.com/docs/ring-offset-width
* @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-w': [
{
'ring-offset': [
isNumber,
isArbitraryLength
]
}
],
/**
* Ring Offset Color
* @see https://v3.tailwindcss.com/docs/ring-offset-color
* @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': scaleColor()
}
],
/**
* Inset Ring Width
* @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
*/ 'inset-ring-w': [
{
'inset-ring': scaleBorderWidth()
}
],
/**
* Inset Ring Color
* @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
*/ 'inset-ring-color': [
{
'inset-ring': scaleColor()
}
],
/**
* Text Shadow
* @see https://tailwindcss.com/docs/text-shadow
*/ 'text-shadow': [
{
'text-shadow': [
'none',
themeTextShadow,
isArbitraryVariableShadow,
isArbitraryShadow
]
}
],
/**
* Text Shadow Color
* @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
*/ 'text-shadow-color': [
{
'text-shadow': scaleColor()
}
],
/**
* Opacity
* @see https://tailwindcss.com/docs/opacity
*/ opacity: [
{
opacity: [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Mix Blend Mode
* @see https://tailwindcss.com/docs/mix-blend-mode
*/ 'mix-blend': [
{
'mix-blend': [
...scaleBlendMode(),
'plus-darker',
'plus-lighter'
]
}
],
/**
* Background Blend Mode
* @see https://tailwindcss.com/docs/background-blend-mode
*/ 'bg-blend': [
{
'bg-blend': scaleBlendMode()
}
],
/**
* Mask Clip
* @see https://tailwindcss.com/docs/mask-clip
*/ 'mask-clip': [
{
'mask-clip': [
'border',
'padding',
'content',
'fill',
'stroke',
'view'
]
},
'mask-no-clip'
],
/**
* Mask Composite
* @see https://tailwindcss.com/docs/mask-composite
*/ 'mask-composite': [
{
mask: [
'add',
'subtract',
'intersect',
'exclude'
]
}
],
/**
* Mask Image
* @see https://tailwindcss.com/docs/mask-image
*/ 'mask-image-linear-pos': [
{
'mask-linear': [
isNumber
]
}
],
'mask-image-linear-from-pos': [
{
'mask-linear-from': scaleMaskImagePosition()
}
],
'mask-image-linear-to-pos': [
{
'mask-linear-to': scaleMaskImagePosition()
}
],
'mask-image-linear-from-color': [
{
'mask-linear-from': scaleColor()
}
],
'mask-image-linear-to-color': [
{
'mask-linear-to': scaleColor()
}
],
'mask-image-t-from-pos': [
{
'mask-t-from': scaleMaskImagePosition()
}
],
'mask-image-t-to-pos': [
{
'mask-t-to': scaleMaskImagePosition()
}
],
'mask-image-t-from-color': [
{
'mask-t-from': scaleColor()
}
],
'mask-image-t-to-color': [
{
'mask-t-to': scaleColor()
}
],
'mask-image-r-from-pos': [
{
'mask-r-from': scaleMaskImagePosition()
}
],
'mask-image-r-to-pos': [
{
'mask-r-to': scaleMaskImagePosition()
}
],
'mask-image-r-from-color': [
{
'mask-r-from': scaleColor()
}
],
'mask-image-r-to-color': [
{
'mask-r-to': scaleColor()
}
],
'mask-image-b-from-pos': [
{
'mask-b-from': scaleMaskImagePosition()
}
],
'mask-image-b-to-pos': [
{
'mask-b-to': scaleMaskImagePosition()
}
],
'mask-image-b-from-color': [
{
'mask-b-from': scaleColor()
}
],
'mask-image-b-to-color': [
{
'mask-b-to': scaleColor()
}
],
'mask-image-l-from-pos': [
{
'mask-l-from': scaleMaskImagePosition()
}
],
'mask-image-l-to-pos': [
{
'mask-l-to': scaleMaskImagePosition()
}
],
'mask-image-l-from-color': [
{
'mask-l-from': scaleColor()
}
],
'mask-image-l-to-color': [
{
'mask-l-to': scaleColor()
}
],
'mask-image-x-from-pos': [
{
'mask-x-from': scaleMaskImagePosition()
}
],
'mask-image-x-to-pos': [
{
'mask-x-to': scaleMaskImagePosition()
}
],
'mask-image-x-from-color': [
{
'mask-x-from': scaleColor()
}
],
'mask-image-x-to-color': [
{
'mask-x-to': scaleColor()
}
],
'mask-image-y-from-pos': [
{
'mask-y-from': scaleMaskImagePosition()
}
],
'mask-image-y-to-pos': [
{
'mask-y-to': scaleMaskImagePosition()
}
],
'mask-image-y-from-color': [
{
'mask-y-from': scaleColor()
}
],
'mask-image-y-to-color': [
{
'mask-y-to': scaleColor()
}
],
'mask-image-radial': [
{
'mask-radial': [
isArbitraryVariable,
isArbitraryValue
]
}
],
'mask-image-radial-from-pos': [
{
'mask-radial-from': scaleMaskImagePosition()
}
],
'mask-image-radial-to-pos': [
{
'mask-radial-to': scaleMaskImagePosition()
}
],
'mask-image-radial-from-color': [
{
'mask-radial-from': scaleColor()
}
],
'mask-image-radial-to-color': [
{
'mask-radial-to': scaleColor()
}
],
'mask-image-radial-shape': [
{
'mask-radial': [
'circle',
'ellipse'
]
}
],
'mask-image-radial-size': [
{
'mask-radial': [
{
closest: [
'side',
'corner'
],
farthest: [
'side',
'corner'
]
}
]
}
],
'mask-image-radial-pos': [
{
'mask-radial-at': scalePosition()
}
],
'mask-image-conic-pos': [
{
'mask-conic': [
isNumber
]
}
],
'mask-image-conic-from-pos': [
{
'mask-conic-from': scaleMaskImagePosition()
}
],
'mask-image-conic-to-pos': [
{
'mask-conic-to': scaleMaskImagePosition()
}
],
'mask-image-conic-from-color': [
{
'mask-conic-from': scaleColor()
}
],
'mask-image-conic-to-color': [
{
'mask-conic-to': scaleColor()
}
],
/**
* Mask Mode
* @see https://tailwindcss.com/docs/mask-mode
*/ 'mask-mode': [
{
mask: [
'alpha',
'luminance',
'match'
]
}
],
/**
* Mask Origin
* @see https://tailwindcss.com/docs/mask-origin
*/ 'mask-origin': [
{
'mask-origin': [
'border',
'padding',
'content',
'fill',
'stroke',
'view'
]
}
],
/**
* Mask Position
* @see https://tailwindcss.com/docs/mask-position
*/ 'mask-position': [
{
mask: scaleBgPosition()
}
],
/**
* Mask Repeat
* @see https://tailwindcss.com/docs/mask-repeat
*/ 'mask-repeat': [
{
mask: scaleBgRepeat()
}
],
/**
* Mask Size
* @see https://tailwindcss.com/docs/mask-size
*/ 'mask-size': [
{
mask: scaleBgSize()
}
],
/**
* Mask Type
* @see https://tailwindcss.com/docs/mask-type
*/ 'mask-type': [
{
'mask-type': [
'alpha',
'luminance'
]
}
],
/**
* Mask Image
* @see https://tailwindcss.com/docs/mask-image
*/ 'mask-image': [
{
mask: [
'none',
isArbitraryVariable,
isArbitraryValue
]
}
],
// ---------------
// --- Filters ---
// ---------------
/**
* Filter
* @see https://tailwindcss.com/docs/filter
*/ filter: [
{
filter: [
// Deprecated since Tailwind CSS v3.0.0
'',
'none',
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Blur
* @see https://tailwindcss.com/docs/blur
*/ blur: [
{
blur: scaleBlur()
}
],
/**
* Brightness
* @see https://tailwindcss.com/docs/brightness
*/ brightness: [
{
brightness: [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Contrast
* @see https://tailwindcss.com/docs/contrast
*/ contrast: [
{
contrast: [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Drop Shadow
* @see https://tailwindcss.com/docs/drop-shadow
*/ 'drop-shadow': [
{
'drop-shadow': [
// Deprecated since Tailwind CSS v4.0.0
'',
'none',
themeDropShadow,
isArbitraryVariableShadow,
isArbitraryShadow
]
}
],
/**
* Drop Shadow Color
* @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
*/ 'drop-shadow-color': [
{
'drop-shadow': scaleColor()
}
],
/**
* Grayscale
* @see https://tailwindcss.com/docs/grayscale
*/ grayscale: [
{
grayscale: [
'',
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Hue Rotate
* @see https://tailwindcss.com/docs/hue-rotate
*/ 'hue-rotate': [
{
'hue-rotate': [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Invert
* @see https://tailwindcss.com/docs/invert
*/ invert: [
{
invert: [
'',
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Saturate
* @see https://tailwindcss.com/docs/saturate
*/ saturate: [
{
saturate: [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Sepia
* @see https://tailwindcss.com/docs/sepia
*/ sepia: [
{
sepia: [
'',
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Backdrop Filter
* @see https://tailwindcss.com/docs/backdrop-filter
*/ 'backdrop-filter': [
{
'backdrop-filter': [
// Deprecated since Tailwind CSS v3.0.0
'',
'none',
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Backdrop Blur
* @see https://tailwindcss.com/docs/backdrop-blur
*/ 'backdrop-blur': [
{
'backdrop-blur': scaleBlur()
}
],
/**
* Backdrop Brightness
* @see https://tailwindcss.com/docs/backdrop-brightness
*/ 'backdrop-brightness': [
{
'backdrop-brightness': [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Backdrop Contrast
* @see https://tailwindcss.com/docs/backdrop-contrast
*/ 'backdrop-contrast': [
{
'backdrop-contrast': [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Backdrop Grayscale
* @see https://tailwindcss.com/docs/backdrop-grayscale
*/ 'backdrop-grayscale': [
{
'backdrop-grayscale': [
'',
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Backdrop Hue Rotate
* @see https://tailwindcss.com/docs/backdrop-hue-rotate
*/ 'backdrop-hue-rotate': [
{
'backdrop-hue-rotate': [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Backdrop Invert
* @see https://tailwindcss.com/docs/backdrop-invert
*/ 'backdrop-invert': [
{
'backdrop-invert': [
'',
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Backdrop Opacity
* @see https://tailwindcss.com/docs/backdrop-opacity
*/ 'backdrop-opacity': [
{
'backdrop-opacity': [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Backdrop Saturate
* @see https://tailwindcss.com/docs/backdrop-saturate
*/ 'backdrop-saturate': [
{
'backdrop-saturate': [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Backdrop Sepia
* @see https://tailwindcss.com/docs/backdrop-sepia
*/ 'backdrop-sepia': [
{
'backdrop-sepia': [
'',
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
// --------------
// --- Tables ---
// --------------
/**
* Border Collapse
* @see https://tailwindcss.com/docs/border-collapse
*/ 'border-collapse': [
{
border: [
'collapse',
'separate'
]
}
],
/**
* Border Spacing
* @see https://tailwindcss.com/docs/border-spacing
*/ 'border-spacing': [
{
'border-spacing': scaleUnambiguousSpacing()
}
],
/**
* Border Spacing X
* @see https://tailwindcss.com/docs/border-spacing
*/ 'border-spacing-x': [
{
'border-spacing-x': scaleUnambiguousSpacing()
}
],
/**
* Border Spacing Y
* @see https://tailwindcss.com/docs/border-spacing
*/ 'border-spacing-y': [
{
'border-spacing-y': scaleUnambiguousSpacing()
}
],
/**
* Table Layout
* @see https://tailwindcss.com/docs/table-layout
*/ 'table-layout': [
{
table: [
'auto',
'fixed'
]
}
],
/**
* Caption Side
* @see https://tailwindcss.com/docs/caption-side
*/ caption: [
{
caption: [
'top',
'bottom'
]
}
],
// ---------------------------------
// --- Transitions and Animation ---
// ---------------------------------
/**
* Transition Property
* @see https://tailwindcss.com/docs/transition-property
*/ transition: [
{
transition: [
'',
'all',
'colors',
'opacity',
'shadow',
'transform',
'none',
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Transition Behavior
* @see https://tailwindcss.com/docs/transition-behavior
*/ 'transition-behavior': [
{
transition: [
'normal',
'discrete'
]
}
],
/**
* Transition Duration
* @see https://tailwindcss.com/docs/transition-duration
*/ duration: [
{
duration: [
isNumber,
'initial',
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Transition Timing Function
* @see https://tailwindcss.com/docs/transition-timing-function
*/ ease: [
{
ease: [
'linear',
'initial',
themeEase,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Transition Delay
* @see https://tailwindcss.com/docs/transition-delay
*/ delay: [
{
delay: [
isNumber,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Animation
* @see https://tailwindcss.com/docs/animation
*/ animate: [
{
animate: [
'none',
themeAnimate,
isArbitraryVariable,
isArbitraryValue
]
}
],
// ------------------
// --- Transforms ---
// ------------------
/**
* Backface Visibility
* @see https://tailwindcss.com/docs/backface-visibility
*/ backface: [
{
backface: [
'hidden',
'visible'
]
}
],
/**
* Perspective
* @see https://tailwindcss.com/docs/perspective
*/ perspective: [
{
perspective: [
themePerspective,
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Perspective Origin
* @see https://tailwindcss.com/docs/perspective-origin
*/ 'perspective-origin': [
{
'perspective-origin': scalePositionWithArbitrary()
}
],
/**
* Rotate
* @see https://tailwindcss.com/docs/rotate
*/ rotate: [
{
rotate: scaleRotate()
}
],
/**
* Rotate X
* @see https://tailwindcss.com/docs/rotate
*/ 'rotate-x': [
{
'rotate-x': scaleRotate()
}
],
/**
* Rotate Y
* @see https://tailwindcss.com/docs/rotate
*/ 'rotate-y': [
{
'rotate-y': scaleRotate()
}
],
/**
* Rotate Z
* @see https://tailwindcss.com/docs/rotate
*/ 'rotate-z': [
{
'rotate-z': scaleRotate()
}
],
/**
* Scale
* @see https://tailwindcss.com/docs/scale
*/ scale: [
{
scale: scaleScale()
}
],
/**
* Scale X
* @see https://tailwindcss.com/docs/scale
*/ 'scale-x': [
{
'scale-x': scaleScale()
}
],
/**
* Scale Y
* @see https://tailwindcss.com/docs/scale
*/ 'scale-y': [
{
'scale-y': scaleScale()
}
],
/**
* Scale Z
* @see https://tailwindcss.com/docs/scale
*/ 'scale-z': [
{
'scale-z': scaleScale()
}
],
/**
* Scale 3D
* @see https://tailwindcss.com/docs/scale
*/ 'scale-3d': [
'scale-3d'
],
/**
* Skew
* @see https://tailwindcss.com/docs/skew
*/ skew: [
{
skew: scaleSkew()
}
],
/**
* Skew X
* @see https://tailwindcss.com/docs/skew
*/ 'skew-x': [
{
'skew-x': scaleSkew()
}
],
/**
* Skew Y
* @see https://tailwindcss.com/docs/skew
*/ 'skew-y': [
{
'skew-y': scaleSkew()
}
],
/**
* Transform
* @see https://tailwindcss.com/docs/transform
*/ transform: [
{
transform: [
isArbitraryVariable,
isArbitraryValue,
'',
'none',
'gpu',
'cpu'
]
}
],
/**
* Transform Origin
* @see https://tailwindcss.com/docs/transform-origin
*/ 'transform-origin': [
{
origin: scalePositionWithArbitrary()
}
],
/**
* Transform Style
* @see https://tailwindcss.com/docs/transform-style
*/ 'transform-style': [
{
transform: [
'3d',
'flat'
]
}
],
/**
* Translate
* @see https://tailwindcss.com/docs/translate
*/ translate: [
{
translate: scaleTranslate()
}
],
/**
* Translate X
* @see https://tailwindcss.com/docs/translate
*/ 'translate-x': [
{
'translate-x': scaleTranslate()
}
],
/**
* Translate Y
* @see https://tailwindcss.com/docs/translate
*/ 'translate-y': [
{
'translate-y': scaleTranslate()
}
],
/**
* Translate Z
* @see https://tailwindcss.com/docs/translate
*/ 'translate-z': [
{
'translate-z': scaleTranslate()
}
],
/**
* Translate None
* @see https://tailwindcss.com/docs/translate
*/ 'translate-none': [
'translate-none'
],
// ---------------------
// --- Interactivity ---
// ---------------------
/**
* Accent Color
* @see https://tailwindcss.com/docs/accent-color
*/ accent: [
{
accent: scaleColor()
}
],
/**
* Appearance
* @see https://tailwindcss.com/docs/appearance
*/ appearance: [
{
appearance: [
'none',
'auto'
]
}
],
/**
* Caret Color
* @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
*/ 'caret-color': [
{
caret: scaleColor()
}
],
/**
* Color Scheme
* @see https://tailwindcss.com/docs/color-scheme
*/ 'color-scheme': [
{
scheme: [
'normal',
'dark',
'light',
'light-dark',
'only-dark',
'only-light'
]
}
],
/**
* Cursor
* @see https://tailwindcss.com/docs/cursor
*/ cursor: [
{
cursor: [
'auto',
'default',
'pointer',
'wait',
'text',
'move',
'help',
'not-allowed',
'none',
'context-menu',
'progress',
'cell',
'crosshair',
'vertical-text',
'alias',
'copy',
'no-drop',
'grab',
'grabbing',
'all-scroll',
'col-resize',
'row-resize',
'n-resize',
'e-resize',
's-resize',
'w-resize',
'ne-resize',
'nw-resize',
'se-resize',
'sw-resize',
'ew-resize',
'ns-resize',
'nesw-resize',
'nwse-resize',
'zoom-in',
'zoom-out',
isArbitraryVariable,
isArbitraryValue
]
}
],
/**
* Field Sizing
* @see https://tailwindcss.com/docs/field-sizing
*/ 'field-sizing': [
{
'field-sizing': [
'fixed',
'content'
]
}
],
/**
* Pointer Events
* @see https://tailwindcss.com/docs/pointer-events
*/ 'pointer-events': [
{
'pointer-events': [
'auto',
'none'
]
}
],
/**
* Resize
* @see https://tailwindcss.com/docs/resize
*/ resize: [
{
resize: [
'none',
'',
'y',
'x'
]
}
],
/**
* Scroll Behavior
* @see https://tailwindcss.com/docs/scroll-behavior
*/ 'scroll-behavior': [
{
scroll: [
'auto',
'smooth'
]
}
],
/**
* Scroll Margin
* @see https://tailwindcss.com/docs/scroll-margin
*/ 'scroll-m': [
{
'scroll-m': scaleUnambiguousSpacing()
}
],
/**
* Scroll Margin X
* @see https://tailwindcss.com/docs/scroll-margin
*/ 'scroll-mx': [
{
'scroll-mx': scaleUnambiguousSpacing()
}
],
/**
* Scroll Margin Y
* @see https://tailwindcss.com/docs/scroll-margin
*/ 'scroll-my': [
{
'scroll-my': scaleUnambiguousSpacing()
}
],
/**
* Scroll Margin Start
* @see https://tailwindcss.com/docs/scroll-margin
*/ 'scroll-ms': [
{
'scroll-ms': scaleUnambiguousSpacing()
}
],
/**
* Scroll Margin End
* @see https://tailwindcss.com/docs/scroll-margin
*/ 'scroll-me': [
{
'scroll-me': scaleUnambiguousSpacing()
}
],
/**
* Scroll Margin Top
* @see https://tailwindcss.com/docs/scroll-margin
*/ 'scroll-mt': [
{
'scroll-mt': scaleUnambiguousSpacing()
}
],
/**
* Scroll Margin Right
* @see https://tailwindcss.com/docs/scroll-margin
*/ 'scroll-mr': [
{
'scroll-mr': scaleUnambiguousSpacing()
}
],
/**
* Scroll Margin Bottom
* @see https://tailwindcss.com/docs/scroll-margin
*/ 'scroll-mb': [
{
'scroll-mb': scaleUnambiguousSpacing()
}
],
/**
* Scroll Margin Left
* @see https://tailwindcss.com/docs/scroll-margin
*/ 'scroll-ml': [
{
'scroll-ml': scaleUnambiguousSpacing()
}
],
/**
* Scroll Padding
* @see https://tailwindcss.com/docs/scroll-padding
*/ 'scroll-p': [
{
'scroll-p': scaleUnambiguousSpacing()
}
],
/**
* Scroll Padding X
* @see https://tailwindcss.com/docs/scroll-padding
*/ 'scroll-px': [
{
'scroll-px': scaleUnambiguousSpacing()
}
],
/**
* Scroll Padding Y
* @see https://tailwindcss.com/docs/scroll-padding
*/ 'scroll-py': [
{
'scroll-py': scaleUnambiguousSpacing()
}
],
/**
* Scroll Padding Start
* @see https://tailwindcss.com/docs/scroll-padding
*/ 'scroll-ps': [
{
'scroll-ps': scaleUnambiguousSpacing()
}
],
/**
* Scroll Padding End
* @see https://tailwindcss.com/docs/scroll-padding
*/ 'scroll-pe': [
{
'scroll-pe': scaleUnambiguousSpacing()
}
],
/**
* Scroll Padding Top
* @see https://tailwindcss.com/docs/scroll-padding
*/ 'scroll-pt': [
{
'scroll-pt': scaleUnambiguousSpacing()
}
],
/**
* Scroll Padding Right
* @see https://tailwindcss.com/docs/scroll-padding
*/ 'scroll-pr': [
{
'scroll-pr': scaleUnambiguousSpacing()
}
],
/**
* Scroll Padding Bottom
* @see https://tailwindcss.com/docs/scroll-padding
*/ 'scroll-pb': [
{
'scroll-pb': scaleUnambiguousSpacing()
}
],
/**
* Scroll Padding Left
* @see https://tailwindcss.com/docs/scroll-padding
*/ 'scroll-pl': [
{
'scroll-pl': scaleUnambiguousSpacing()
}
],
/**
* Scroll Snap Align
* @see https://tailwindcss.com/docs/scroll-snap-align
*/ 'snap-align': [
{
snap: [
'start',
'end',
'center',
'align-none'
]
}
],
/**
* Scroll Snap Stop
* @see https://tailwindcss.com/docs/scroll-snap-stop
*/ 'snap-stop': [
{
snap: [
'normal',
'always'
]
}
],
/**
* Scroll Snap Type
* @see https://tailwindcss.com/docs/scroll-snap-type
*/ 'snap-type': [
{
snap: [
'none',
'x',
'y',
'both'
]
}
],
/**
* Scroll Snap Type Strictness
* @see https://tailwindcss.com/docs/scroll-snap-type
*/ 'snap-strictness': [
{
snap: [
'mandatory',
'proximity'
]
}
],
/**
* Touch Action
* @see https://tailwindcss.com/docs/touch-action
*/ touch: [
{
touch: [
'auto',
'none',
'manipulation'
]
}
],
/**
* Touch Action X
* @see https://tailwindcss.com/docs/touch-action
*/ 'touch-x': [
{
'touch-pan': [
'x',
'left',
'right'
]
}
],
/**
* Touch Action Y
* @see https://tailwindcss.com/docs/touch-action
*/ 'touch-y': [
{
'touch-pan': [
'y',
'up',
'down'
]
}
],
/**
* Touch Action Pinch Zoom
* @see https://tailwindcss.com/docs/touch-action
*/ 'touch-pz': [
'touch-pinch-zoom'
],
/**
* User Select
* @see https://tailwindcss.com/docs/user-select
*/ select: [
{
select: [
'none',
'text',
'all',
'auto'
]
}
],
/**
* Will Change
* @see https://tailwindcss.com/docs/will-change
*/ 'will-change': [
{
'will-change': [
'auto',
'scroll',
'contents',
'transform',
isArbitraryVariable,
isArbitraryValue
]
}
],
// -----------
// --- SVG ---
// -----------
/**
* Fill
* @see https://tailwindcss.com/docs/fill
*/ fill: [
{
fill: [
'none',
...scaleColor()
]
}
],
/**
* Stroke Width
* @see https://tailwindcss.com/docs/stroke-width
*/ 'stroke-w': [
{
stroke: [
isNumber,
isArbitraryVariableLength,
isArbitraryLength,
isArbitraryNumber
]
}
],
/**
* Stroke
* @see https://tailwindcss.com/docs/stroke
*/ stroke: [
{
stroke: [
'none',
...scaleColor()
]
}
],
// ---------------------
// --- Accessibility ---
// ---------------------
/**
* Forced Color Adjust
* @see https://tailwindcss.com/docs/forced-color-adjust
*/ 'forced-color-adjust': [
{
'forced-color-adjust': [
'auto',
'none'
]
}
]
},
conflictingClassGroups: {
overflow: [
'overflow-x',
'overflow-y'
],
overscroll: [
'overscroll-x',
'overscroll-y'
],
inset: [
'inset-x',
'inset-y',
'start',
'end',
'top',
'right',
'bottom',
'left'
],
'inset-x': [
'right',
'left'
],
'inset-y': [
'top',
'bottom'
],
flex: [
'basis',
'grow',
'shrink'
],
gap: [
'gap-x',
'gap-y'
],
p: [
'px',
'py',
'ps',
'pe',
'pt',
'pr',
'pb',
'pl'
],
px: [
'pr',
'pl'
],
py: [
'pt',
'pb'
],
m: [
'mx',
'my',
'ms',
'me',
'mt',
'mr',
'mb',
'ml'
],
mx: [
'mr',
'ml'
],
my: [
'mt',
'mb'
],
size: [
'w',
'h'
],
'font-size': [
'leading'
],
'fvn-normal': [
'fvn-ordinal',
'fvn-slashed-zero',
'fvn-figure',
'fvn-spacing',
'fvn-fraction'
],
'fvn-ordinal': [
'fvn-normal'
],
'fvn-slashed-zero': [
'fvn-normal'
],
'fvn-figure': [
'fvn-normal'
],
'fvn-spacing': [
'fvn-normal'
],
'fvn-fraction': [
'fvn-normal'
],
'line-clamp': [
'display',
'overflow'
],
rounded: [
'rounded-s',
'rounded-e',
'rounded-t',
'rounded-r',
'rounded-b',
'rounded-l',
'rounded-ss',
'rounded-se',
'rounded-ee',
'rounded-es',
'rounded-tl',
'rounded-tr',
'rounded-br',
'rounded-bl'
],
'rounded-s': [
'rounded-ss',
'rounded-es'
],
'rounded-e': [
'rounded-se',
'rounded-ee'
],
'rounded-t': [
'rounded-tl',
'rounded-tr'
],
'rounded-r': [
'rounded-tr',
'rounded-br'
],
'rounded-b': [
'rounded-br',
'rounded-bl'
],
'rounded-l': [
'rounded-tl',
'rounded-bl'
],
'border-spacing': [
'border-spacing-x',
'border-spacing-y'
],
'border-w': [
'border-w-x',
'border-w-y',
'border-w-s',
'border-w-e',
'border-w-t',
'border-w-r',
'border-w-b',
'border-w-l'
],
'border-w-x': [
'border-w-r',
'border-w-l'
],
'border-w-y': [
'border-w-t',
'border-w-b'
],
'border-color': [
'border-color-x',
'border-color-y',
'border-color-s',
'border-color-e',
'border-color-t',
'border-color-r',
'border-color-b',
'border-color-l'
],
'border-color-x': [
'border-color-r',
'border-color-l'
],
'border-color-y': [
'border-color-t',
'border-color-b'
],
translate: [
'translate-x',
'translate-y',
'translate-none'
],
'translate-none': [
'translate',
'translate-x',
'translate-y',
'translate-z'
],
'scroll-m': [
'scroll-mx',
'scroll-my',
'scroll-ms',
'scroll-me',
'scroll-mt',
'scroll-mr',
'scroll-mb',
'scroll-ml'
],
'scroll-mx': [
'scroll-mr',
'scroll-ml'
],
'scroll-my': [
'scroll-mt',
'scroll-mb'
],
'scroll-p': [
'scroll-px',
'scroll-py',
'scroll-ps',
'scroll-pe',
'scroll-pt',
'scroll-pr',
'scroll-pb',
'scroll-pl'
],
'scroll-px': [
'scroll-pr',
'scroll-pl'
],
'scroll-py': [
'scroll-pt',
'scroll-pb'
],
touch: [
'touch-x',
'touch-y',
'touch-pz'
],
'touch-x': [
'touch'
],
'touch-y': [
'touch'
],
'touch-pz': [
'touch'
]
},
conflictingClassGroupModifiers: {
'font-size': [
'leading'
]
},
orderSensitiveModifiers: [
'*',
'**',
'after',
'backdrop',
'before',
'details-content',
'file',
'first-letter',
'first-line',
'marker',
'placeholder',
'selection'
]
};
};
const twMerge = /*#__PURE__*/ createTailwindMerge(getDefaultConfig);
export { twMerge as t };
//# sourceMappingURL=bundle-mjs-BYcyWisL.mjs.map