tailwind-merge
Version:
Merge Tailwind CSS classes without style conflicts
1,421 lines (1,417 loc) • 112 kB
JavaScript
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
* Concatenates two arrays faster than the array spread operator.
*/
var concatArrays = function concatArrays(array1, array2) {
// Pre-allocate for better V8 optimization
var combinedArray = new Array(array1.length + array2.length);
for (var i = 0; i < array1.length; i++) {
combinedArray[i] = array1[i];
}
for (var _i = 0; _i < array2.length; _i++) {
combinedArray[array1.length + _i] = array2[_i];
}
return combinedArray;
};
// Factory function ensures consistent object shapes
var createClassValidatorObject = function createClassValidatorObject(classGroupId, validator) {
return {
classGroupId: classGroupId,
validator: validator
};
};
// Factory ensures consistent ClassPartObject shape
var createClassPartObject = function createClassPartObject(nextPart, validators, classGroupId) {
if (nextPart === void 0) {
nextPart = new Map();
}
if (validators === void 0) {
validators = null;
}
return {
nextPart: nextPart,
validators: validators,
classGroupId: classGroupId
};
};
var CLASS_PART_SEPARATOR = '-';
var EMPTY_CONFLICTS = [];
// I use two dots here because one dot is used as prefix for class groups in plugins
var ARBITRARY_PROPERTY_PREFIX = 'arbitrary..';
var createClassGroupUtils = function createClassGroupUtils(config) {
var classMap = createClassMap(config);
var conflictingClassGroups = config.conflictingClassGroups,
conflictingClassGroupModifiers = config.conflictingClassGroupModifiers;
var getClassGroupId = function getClassGroupId(className) {
if (className.startsWith('[') && className.endsWith(']')) {
return getGroupIdForArbitraryProperty(className);
}
var 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 skip it.
var startIndex = classParts[0] === '' && classParts.length > 1 ? 1 : 0;
return _getGroupRecursive(classParts, startIndex, classMap);
};
var getConflictingClassGroupIds = function getConflictingClassGroupIds(classGroupId, hasPostfixModifier) {
if (hasPostfixModifier) {
var modifierConflicts = conflictingClassGroupModifiers[classGroupId];
var baseConflicts = conflictingClassGroups[classGroupId];
if (modifierConflicts) {
if (baseConflicts) {
// Merge base conflicts with modifier conflicts
return concatArrays(baseConflicts, modifierConflicts);
}
// Only modifier conflicts
return modifierConflicts;
}
// Fall back to without postfix if no modifier conflicts
return baseConflicts || EMPTY_CONFLICTS;
}
return conflictingClassGroups[classGroupId] || EMPTY_CONFLICTS;
};
return {
getClassGroupId: getClassGroupId,
getConflictingClassGroupIds: getConflictingClassGroupIds
};
};
var _getGroupRecursive = function getGroupRecursive(classParts, startIndex, classPartObject) {
var classPathsLength = classParts.length - startIndex;
if (classPathsLength === 0) {
return classPartObject.classGroupId;
}
var currentClassPart = classParts[startIndex];
var nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
if (nextClassPartObject) {
var result = _getGroupRecursive(classParts, startIndex + 1, nextClassPartObject);
if (result) return result;
}
var validators = classPartObject.validators;
if (validators === null) {
return undefined;
}
// Build classRest string efficiently by joining from startIndex onwards
var classRest = startIndex === 0 ? classParts.join(CLASS_PART_SEPARATOR) : classParts.slice(startIndex).join(CLASS_PART_SEPARATOR);
var validatorsLength = validators.length;
for (var i = 0; i < validatorsLength; i++) {
var validatorObj = validators[i];
if (validatorObj.validator(classRest)) {
return validatorObj.classGroupId;
}
}
return undefined;
};
/**
* Get the class group ID for an arbitrary property.
*
* @param className - The class name to get the group ID for. Is expected to be string starting with `[` and ending with `]`.
*/
var getGroupIdForArbitraryProperty = function getGroupIdForArbitraryProperty(className) {
return className.slice(1, -1).indexOf(':') === -1 ? undefined : function () {
var content = className.slice(1, -1);
var colonIndex = content.indexOf(':');
var property = content.slice(0, colonIndex);
return property ? ARBITRARY_PROPERTY_PREFIX + property : undefined;
}();
};
/**
* Exported for testing only
*/
var createClassMap = function createClassMap(config) {
var theme = config.theme,
classGroups = config.classGroups;
return processClassGroups(classGroups, theme);
};
// Split into separate functions to maintain monomorphic call sites
var processClassGroups = function processClassGroups(classGroups, theme) {
var classMap = createClassPartObject();
for (var classGroupId in classGroups) {
var group = classGroups[classGroupId];
processClassesRecursively(group, classMap, classGroupId, theme);
}
return classMap;
};
var processClassesRecursively = function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) {
var len = classGroup.length;
for (var i = 0; i < len; i++) {
var classDefinition = classGroup[i];
processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
}
};
// Split into separate functions for each type to maintain monomorphic call sites
var processClassDefinition = function processClassDefinition(classDefinition, classPartObject, classGroupId, theme) {
if (typeof classDefinition === 'string') {
processStringDefinition(classDefinition, classPartObject, classGroupId);
return;
}
if (typeof classDefinition === 'function') {
processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
return;
}
processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
};
var processStringDefinition = function processStringDefinition(classDefinition, classPartObject, classGroupId) {
var classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
classPartObjectToEdit.classGroupId = classGroupId;
};
var processFunctionDefinition = function processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme) {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
return;
}
if (classPartObject.validators === null) {
classPartObject.validators = [];
}
classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
};
var processObjectDefinition = function processObjectDefinition(classDefinition, classPartObject, classGroupId, theme) {
var entries = Object.entries(classDefinition);
var len = entries.length;
for (var i = 0; i < len; i++) {
var _entries$i = entries[i],
key = _entries$i[0],
value = _entries$i[1];
processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
}
};
var getPart = function getPart(classPartObject, path) {
var current = classPartObject;
var parts = path.split(CLASS_PART_SEPARATOR);
var len = parts.length;
for (var i = 0; i < len; i++) {
var part = parts[i];
var next = current.nextPart.get(part);
if (!next) {
next = createClassPartObject();
current.nextPart.set(part, next);
}
current = next;
}
return current;
};
// Type guard maintains monomorphic check
var isThemeGetter = function isThemeGetter(func) {
return 'isThemeGetter' in func && func.isThemeGetter === true;
};
// LRU cache implementation using plain objects for simplicity
var createLruCache = function createLruCache(maxCacheSize) {
if (maxCacheSize < 1) {
return {
get: function get() {
return undefined;
},
set: function set() {}
};
}
var cacheSize = 0;
var cache = Object.create(null);
var previousCache = Object.create(null);
var update = function update(key, value) {
cache[key] = value;
cacheSize++;
if (cacheSize > maxCacheSize) {
cacheSize = 0;
previousCache = cache;
cache = Object.create(null);
}
};
return {
get: function get(key) {
var value = cache[key];
if (value !== undefined) {
return value;
}
if ((value = previousCache[key]) !== undefined) {
update(key, value);
return value;
}
},
set: function set(key, value) {
if (key in cache) {
cache[key] = value;
} else {
update(key, value);
}
}
};
};
var IMPORTANT_MODIFIER = '!';
var MODIFIER_SEPARATOR = ':';
var EMPTY_MODIFIERS = [];
// Pre-allocated result object shape for consistency
var createResultObject = function createResultObject(modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition, isExternal) {
return {
modifiers: modifiers,
hasImportantModifier: hasImportantModifier,
baseClassName: baseClassName,
maybePostfixModifierPosition: maybePostfixModifierPosition,
isExternal: isExternal
};
};
var createParseClassName = function createParseClassName(config) {
var prefix = config.prefix,
experimentalParseClassName = config.experimentalParseClassName;
/**
* 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
*/
var parseClassName = function parseClassName(className) {
// Use simple array with push for better performance
var modifiers = [];
var bracketDepth = 0;
var parenDepth = 0;
var modifierStart = 0;
var postfixModifierPosition;
var len = className.length;
for (var index = 0; index < len; index++) {
var currentCharacter = className[index];
if (bracketDepth === 0 && parenDepth === 0) {
if (currentCharacter === MODIFIER_SEPARATOR) {
modifiers.push(className.slice(modifierStart, index));
modifierStart = index + 1;
continue;
}
if (currentCharacter === '/') {
postfixModifierPosition = index;
continue;
}
}
if (currentCharacter === '[') bracketDepth++;else if (currentCharacter === ']') bracketDepth--;else if (currentCharacter === '(') parenDepth++;else if (currentCharacter === ')') parenDepth--;
}
var baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.slice(modifierStart);
// Inline important modifier check
var baseClassName = baseClassNameWithImportantModifier;
var hasImportantModifier = false;
if (baseClassNameWithImportantModifier.endsWith(IMPORTANT_MODIFIER)) {
baseClassName = baseClassNameWithImportantModifier.slice(0, -1);
hasImportantModifier = true;
} else if (
/**
* 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
*/
baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)) {
baseClassName = baseClassNameWithImportantModifier.slice(1);
hasImportantModifier = true;
}
var maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
return createResultObject(modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition);
};
if (prefix) {
var fullPrefix = prefix + MODIFIER_SEPARATOR;
var parseClassNameOriginal = parseClassName;
parseClassName = function parseClassName(className) {
return className.startsWith(fullPrefix) ? parseClassNameOriginal(className.slice(fullPrefix.length)) : createResultObject(EMPTY_MODIFIERS, false, className, undefined, true);
};
}
if (experimentalParseClassName) {
var _parseClassNameOriginal = parseClassName;
parseClassName = function parseClassName(className) {
return experimentalParseClassName({
className: className,
parseClassName: _parseClassNameOriginal
});
};
}
return parseClassName;
};
/**
* 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
*/
var createSortModifiers = function createSortModifiers(config) {
// Pre-compute weights for all known modifiers for O(1) comparison
var modifierWeights = new Map();
// Assign weights to sensitive modifiers (highest priority, but preserve order)
config.orderSensitiveModifiers.forEach(function (mod, index) {
modifierWeights.set(mod, 1000000 + index); // High weights for sensitive mods
});
return function (modifiers) {
var result = [];
var currentSegment = [];
// Process modifiers in one pass
for (var i = 0; i < modifiers.length; i++) {
var modifier = modifiers[i];
// Check if modifier is sensitive (starts with '[' or in orderSensitiveModifiers)
var isArbitrary = modifier[0] === '[';
var isOrderSensitive = modifierWeights.has(modifier);
if (isArbitrary || isOrderSensitive) {
// Sort and flush current segment alphabetically
if (currentSegment.length > 0) {
currentSegment.sort();
result.push.apply(result, currentSegment);
currentSegment = [];
}
result.push(modifier);
} else {
// Regular modifier - add to current segment for batch sorting
currentSegment.push(modifier);
}
}
// Sort and add any remaining segment items
if (currentSegment.length > 0) {
currentSegment.sort();
result.push.apply(result, currentSegment);
}
return result;
};
};
var createConfigUtils = function createConfigUtils(config) {
return _extends({
cache: createLruCache(config.cacheSize),
parseClassName: createParseClassName(config),
sortModifiers: createSortModifiers(config),
postfixLookupClassGroupIds: createPostfixLookupClassGroupIds(config)
}, createClassGroupUtils(config));
};
var createPostfixLookupClassGroupIds = function createPostfixLookupClassGroupIds(config) {
var lookup = Object.create(null);
var classGroupIds = config.postfixLookupClassGroups;
if (classGroupIds) {
for (var i = 0; i < classGroupIds.length; i++) {
lookup[classGroupIds[i]] = true;
}
}
return lookup;
};
var SPLIT_CLASSES_REGEX = /\s+/;
var mergeClassList = function mergeClassList(classList, configUtils) {
var parseClassName = configUtils.parseClassName,
getClassGroupId = configUtils.getClassGroupId,
getConflictingClassGroupIds = configUtils.getConflictingClassGroupIds,
sortModifiers = configUtils.sortModifiers,
postfixLookupClassGroupIds = configUtils.postfixLookupClassGroupIds;
/**
* Set of classGroupIds in following format:
* `{importantModifier}{variantModifiers}{classGroupId}`
* @example 'float'
* @example 'hover:focus:bg-color'
* @example 'md:!pr'
*/
var classGroupsInConflict = [];
var classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
var result = '';
for (var index = classNames.length - 1; index >= 0; index -= 1) {
var originalClassName = classNames[index];
var _parseClassName = parseClassName(originalClassName),
isExternal = _parseClassName.isExternal,
modifiers = _parseClassName.modifiers,
hasImportantModifier = _parseClassName.hasImportantModifier,
baseClassName = _parseClassName.baseClassName,
maybePostfixModifierPosition = _parseClassName.maybePostfixModifierPosition;
if (isExternal) {
result = originalClassName + (result.length > 0 ? ' ' + result : result);
continue;
}
var hasPostfixModifier = !!maybePostfixModifierPosition;
var classGroupId = void 0;
if (hasPostfixModifier) {
var baseClassNameWithoutPostfix = baseClassName.substring(0, maybePostfixModifierPosition);
classGroupId = getClassGroupId(baseClassNameWithoutPostfix);
var classGroupIdWithPostfix = classGroupId && postfixLookupClassGroupIds[classGroupId] ? getClassGroupId(baseClassName) : undefined;
if (classGroupIdWithPostfix && classGroupIdWithPostfix !== classGroupId) {
classGroupId = classGroupIdWithPostfix;
hasPostfixModifier = false;
}
} else {
classGroupId = getClassGroupId(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;
}
// Fast path: skip sorting for empty or single modifier
var variantModifier = modifiers.length === 0 ? '' : modifiers.length === 1 ? modifiers[0] : sortModifiers(modifiers).join(':');
var modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
var classId = modifierId + classGroupId;
if (classGroupsInConflict.indexOf(classId) > -1) {
// Tailwind class omitted due to conflict
continue;
}
classGroupsInConflict.push(classId);
var conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
for (var i = 0; i < conflictGroups.length; ++i) {
var 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)
*/
var twJoin = function twJoin() {
var index = 0;
var argument;
var resolvedValue;
var string = '';
while (index < arguments.length) {
var _index;
if (argument = (_index = index++, _index < 0 || arguments.length <= _index ? undefined : arguments[_index])) {
if (resolvedValue = _toValue(argument)) {
string && (string += ' ');
string += resolvedValue;
}
}
}
return string;
};
var _toValue = function toValue(mix) {
// Fast path for strings
if (typeof mix === 'string') {
return mix;
}
var resolvedValue;
var string = '';
for (var k = 0; k < mix.length; k++) {
if (mix[k]) {
if (resolvedValue = _toValue(mix[k])) {
string && (string += ' ');
string += resolvedValue;
}
}
}
return string;
};
var createTailwindMerge = function createTailwindMerge(createConfigFirst) {
for (var _len = arguments.length, createConfigRest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
createConfigRest[_key - 1] = arguments[_key];
}
var configUtils;
var cacheGet;
var cacheSet;
var functionToCall;
var initTailwindMerge = function initTailwindMerge(classList) {
var config = createConfigRest.reduce(function (previousConfig, createConfigCurrent) {
return createConfigCurrent(previousConfig);
}, createConfigFirst());
configUtils = createConfigUtils(config);
cacheGet = configUtils.cache.get;
cacheSet = configUtils.cache.set;
functionToCall = tailwindMerge;
return tailwindMerge(classList);
};
var tailwindMerge = function tailwindMerge(classList) {
var cachedResult = cacheGet(classList);
if (cachedResult) {
return cachedResult;
}
var result = mergeClassList(classList, configUtils);
cacheSet(classList, result);
return result;
};
functionToCall = initTailwindMerge;
return function () {
return functionToCall(twJoin.apply(void 0, arguments));
};
};
var fallbackThemeArr = [];
var fromTheme = function fromTheme(key) {
var themeGetter = function themeGetter(theme) {
return theme[key] || fallbackThemeArr;
};
themeGetter.isThemeGetter = true;
return themeGetter;
};
var arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
var arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
var fractionRegex = /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/;
var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
var 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$/;
var colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
// Shadow always begins with x and y offset separated by underscore optionally prepended by inset
var shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
var imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
var isFraction = function isFraction(value) {
return fractionRegex.test(value);
};
var isNumber = function isNumber(value) {
return !!value && !Number.isNaN(Number(value));
};
var isInteger = function isInteger(value) {
return !!value && Number.isInteger(Number(value));
};
var isPercent = function isPercent(value) {
return value.endsWith('%') && isNumber(value.slice(0, -1));
};
var isTshirtSize = function isTshirtSize(value) {
return tshirtUnitRegex.test(value);
};
var isAny = function isAny() {
return true;
};
var isLengthOnly = function isLengthOnly(value) {
return (
// `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)
);
};
var isNever = function isNever() {
return false;
};
var isShadow = function isShadow(value) {
return shadowRegex.test(value);
};
var isImage = function isImage(value) {
return imageRegex.test(value);
};
var isAnyNonArbitrary = function isAnyNonArbitrary(value) {
return !isArbitraryValue(value) && !isArbitraryVariable(value);
};
var isNamedContainerQuery = function isNamedContainerQuery(value) {
return value.startsWith('@container') && (value[10] === '/' && value[11] !== undefined || value[11] === 's' && value[16] !== undefined && value.startsWith('-size/', 10) || value[11] === 'n' && value[18] !== undefined && value.startsWith('-normal/', 10));
};
var isArbitrarySize = function isArbitrarySize(value) {
return getIsArbitraryValue(value, isLabelSize, isNever);
};
var isArbitraryValue = function isArbitraryValue(value) {
return arbitraryValueRegex.test(value);
};
var isArbitraryLength = function isArbitraryLength(value) {
return getIsArbitraryValue(value, isLabelLength, isLengthOnly);
};
var isArbitraryNumber = function isArbitraryNumber(value) {
return getIsArbitraryValue(value, isLabelNumber, isNumber);
};
var isArbitraryWeight = function isArbitraryWeight(value) {
return getIsArbitraryValue(value, isLabelWeight, isAny);
};
var isArbitraryFamilyName = function isArbitraryFamilyName(value) {
return getIsArbitraryValue(value, isLabelFamilyName, isNever);
};
var isArbitraryPosition = function isArbitraryPosition(value) {
return getIsArbitraryValue(value, isLabelPosition, isNever);
};
var isArbitraryImage = function isArbitraryImage(value) {
return getIsArbitraryValue(value, isLabelImage, isImage);
};
var isArbitraryShadow = function isArbitraryShadow(value) {
return getIsArbitraryValue(value, isLabelShadow, isShadow);
};
var isArbitraryVariable = function isArbitraryVariable(value) {
return arbitraryVariableRegex.test(value);
};
var isArbitraryVariableLength = function isArbitraryVariableLength(value) {
return getIsArbitraryVariable(value, isLabelLength);
};
var isArbitraryVariableFamilyName = function isArbitraryVariableFamilyName(value) {
return getIsArbitraryVariable(value, isLabelFamilyName);
};
var isArbitraryVariablePosition = function isArbitraryVariablePosition(value) {
return getIsArbitraryVariable(value, isLabelPosition);
};
var isArbitraryVariableSize = function isArbitraryVariableSize(value) {
return getIsArbitraryVariable(value, isLabelSize);
};
var isArbitraryVariableImage = function isArbitraryVariableImage(value) {
return getIsArbitraryVariable(value, isLabelImage);
};
var isArbitraryVariableShadow = function isArbitraryVariableShadow(value) {
return getIsArbitraryVariable(value, isLabelShadow, true);
};
var isArbitraryVariableWeight = function isArbitraryVariableWeight(value) {
return getIsArbitraryVariable(value, isLabelWeight, true);
};
// Helpers
var getIsArbitraryValue = function getIsArbitraryValue(value, testLabel, testValue) {
var result = arbitraryValueRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return testValue(result[2]);
}
return false;
};
var getIsArbitraryVariable = function getIsArbitraryVariable(value, testLabel, shouldMatchNoLabel) {
if (shouldMatchNoLabel === void 0) {
shouldMatchNoLabel = false;
}
var result = arbitraryVariableRegex.exec(value);
if (result) {
if (result[1]) {
return testLabel(result[1]);
}
return shouldMatchNoLabel;
}
return false;
};
// Labels
var isLabelPosition = function isLabelPosition(label) {
return label === 'position' || label === 'percentage';
};
var isLabelImage = function isLabelImage(label) {
return label === 'image' || label === 'url';
};
var isLabelSize = function isLabelSize(label) {
return label === 'length' || label === 'size' || label === 'bg-size';
};
var isLabelLength = function isLabelLength(label) {
return label === 'length';
};
var isLabelNumber = function isLabelNumber(label) {
return label === 'number';
};
var isLabelFamilyName = function isLabelFamilyName(label) {
return label === 'family-name';
};
var isLabelWeight = function isLabelWeight(label) {
return label === 'number' || label === 'weight';
};
var isLabelShadow = function isLabelShadow(label) {
return label === 'shadow';
};
var validators = /*#__PURE__*/Object.defineProperty({
__proto__: null,
isAny: isAny,
isAnyNonArbitrary: isAnyNonArbitrary,
isArbitraryFamilyName: isArbitraryFamilyName,
isArbitraryImage: isArbitraryImage,
isArbitraryLength: isArbitraryLength,
isArbitraryNumber: isArbitraryNumber,
isArbitraryPosition: isArbitraryPosition,
isArbitraryShadow: isArbitraryShadow,
isArbitrarySize: isArbitrarySize,
isArbitraryValue: isArbitraryValue,
isArbitraryVariable: isArbitraryVariable,
isArbitraryVariableFamilyName: isArbitraryVariableFamilyName,
isArbitraryVariableImage: isArbitraryVariableImage,
isArbitraryVariableLength: isArbitraryVariableLength,
isArbitraryVariablePosition: isArbitraryVariablePosition,
isArbitraryVariableShadow: isArbitraryVariableShadow,
isArbitraryVariableSize: isArbitraryVariableSize,
isArbitraryVariableWeight: isArbitraryVariableWeight,
isArbitraryWeight: isArbitraryWeight,
isFraction: isFraction,
isInteger: isInteger,
isNamedContainerQuery: isNamedContainerQuery,
isNumber: isNumber,
isPercent: isPercent,
isTshirtSize: isTshirtSize
}, Symbol.toStringTag, {
value: 'Module'
});
var getDefaultConfig = function getDefaultConfig() {
/**
* Theme getters for theme variable namespaces
* @see https://tailwindcss.com/docs/theme#theme-variable-namespaces
*/
/***/
var themeColor = fromTheme('color');
var themeFont = fromTheme('font');
var themeText = fromTheme('text');
var themeFontWeight = fromTheme('font-weight');
var themeTracking = fromTheme('tracking');
var themeLeading = fromTheme('leading');
var themeBreakpoint = fromTheme('breakpoint');
var themeContainer = fromTheme('container');
var themeSpacing = fromTheme('spacing');
var themeRadius = fromTheme('radius');
var themeShadow = fromTheme('shadow');
var themeInsetShadow = fromTheme('inset-shadow');
var themeTextShadow = fromTheme('text-shadow');
var themeDropShadow = fromTheme('drop-shadow');
var themeBlur = fromTheme('blur');
var themePerspective = fromTheme('perspective');
var themeAspect = fromTheme('aspect');
var themeEase = fromTheme('ease');
var 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.
*/
/***/
var scaleBreak = function scaleBreak() {
return ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
};
var scalePosition = function scalePosition() {
return ['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'];
};
var scalePositionWithArbitrary = function scalePositionWithArbitrary() {
return [].concat(scalePosition(), [isArbitraryVariable, isArbitraryValue]);
};
var scaleOverflow = function scaleOverflow() {
return ['auto', 'hidden', 'clip', 'visible', 'scroll'];
};
var scaleOverscroll = function scaleOverscroll() {
return ['auto', 'contain', 'none'];
};
var scaleUnambiguousSpacing = function scaleUnambiguousSpacing() {
return [isArbitraryVariable, isArbitraryValue, themeSpacing];
};
var scaleInset = function scaleInset() {
return [isFraction, 'full', 'auto'].concat(scaleUnambiguousSpacing());
};
var scaleGridTemplateColsRows = function scaleGridTemplateColsRows() {
return [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue];
};
var scaleGridColRowStartAndEnd = function scaleGridColRowStartAndEnd() {
return ['auto', {
span: ['full', isInteger, isArbitraryVariable, isArbitraryValue]
}, isInteger, isArbitraryVariable, isArbitraryValue];
};
var scaleGridColRowStartOrEnd = function scaleGridColRowStartOrEnd() {
return [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
};
var scaleGridAutoColsRows = function scaleGridAutoColsRows() {
return ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
};
var scaleAlignPrimaryAxis = function scaleAlignPrimaryAxis() {
return ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline', 'center-safe', 'end-safe'];
};
var scaleAlignSecondaryAxis = function scaleAlignSecondaryAxis() {
return ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
};
var scaleMargin = function scaleMargin() {
return ['auto'].concat(scaleUnambiguousSpacing());
};
var scaleSizing = function scaleSizing() {
return [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit'].concat(scaleUnambiguousSpacing());
};
var scaleSizingInline = function scaleSizingInline() {
return [isFraction, 'screen', 'full', 'dvw', 'lvw', 'svw', 'min', 'max', 'fit'].concat(scaleUnambiguousSpacing());
};
var scaleSizingBlock = function scaleSizingBlock() {
return [isFraction, 'screen', 'full', 'lh', 'dvh', 'lvh', 'svh', 'min', 'max', 'fit'].concat(scaleUnambiguousSpacing());
};
var scaleColor = function scaleColor() {
return [themeColor, isArbitraryVariable, isArbitraryValue];
};
var scaleBgPosition = function scaleBgPosition() {
return [].concat(scalePosition(), [isArbitraryVariablePosition, isArbitraryPosition, {
position: [isArbitraryVariable, isArbitraryValue]
}]);
};
var scaleBgRepeat = function scaleBgRepeat() {
return ['no-repeat', {
repeat: ['', 'x', 'y', 'space', 'round']
}];
};
var scaleBgSize = function scaleBgSize() {
return ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize, {
size: [isArbitraryVariable, isArbitraryValue]
}];
};
var scaleGradientStopPosition = function scaleGradientStopPosition() {
return [isPercent, isArbitraryVariableLength, isArbitraryLength];
};
var scaleRadius = function scaleRadius() {
return [
// Deprecated since Tailwind CSS v4.0.0
'', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue];
};
var scaleBorderWidth = function scaleBorderWidth() {
return ['', isNumber, isArbitraryVariableLength, isArbitraryLength];
};
var scaleLineStyle = function scaleLineStyle() {
return ['solid', 'dashed', 'dotted', 'double'];
};
var scaleBlendMode = function scaleBlendMode() {
return ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
};
var scaleMaskImagePosition = function scaleMaskImagePosition() {
return [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
};
var scaleBlur = function scaleBlur() {
return [
// Deprecated since Tailwind CSS v4.0.0
'', 'none', themeBlur, isArbitraryVariable, isArbitraryValue];
};
var scaleRotate = function scaleRotate() {
return ['none', isNumber, isArbitraryVariable, isArbitraryValue];
};
var scaleScale = function scaleScale() {
return ['none', isNumber, isArbitraryVariable, isArbitraryValue];
};
var scaleSkew = function scaleSkew() {
return [isNumber, isArbitraryVariable, isArbitraryValue];
};
var scaleTranslate = function scaleTranslate() {
return [isFraction, 'full'].concat(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'],
/**
* Container Type
* @see https://tailwindcss.com/docs/responsive-design#container-queries
*/
'container-type': [{
'@container': ['', 'normal', 'size', isArbitraryVariable, isArbitraryValue]
}],
/**
* Container Name
* @see https://tailwindcss.com/docs/responsive-design#named-containers
*/
'container-named': [isNamedContainerQuery],
/**
* 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'],
/**
* Inset
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
inset: [{
inset: scaleInset()
}],
/**
* Inset Inline
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
'inset-x': [{
'inset-x': scaleInset()
}],
/**
* Inset Block
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
'inset-y': [{
'inset-y': scaleInset()
}],
/**
* Inset Inline Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
* @todo class group will be renamed to `inset-s` in next major release
*/
start: [{
'inset-s': scaleInset(),
/**
* @deprecated since Tailwind CSS v4.2.0 in favor of `inset-s-*` utilities.
* @see https://github.com/tailwindlabs/tailwindcss/pull/19613
*/
start: scaleInset()
}],
/**
* Inset Inline End
* @see https://tailwindcss.com/docs/top-right-bottom-left
* @todo class group will be renamed to `inset-e` in next major release
*/
end: [{
'inset-e': scaleInset(),
/**
* @deprecated since Tailwind CSS v4.2.0 in favor of `inset-e-*` utilities.
* @see https://github.com/tailwindlabs/tailwindcss/pull/19613
*/
end: scaleInset()
}],
/**
* Inset Block Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
'inset-bs': [{
'inset-bs': scaleInset()
}],
/**
* Inset Block End
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
'inset-be': [{
'inset-be': 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].concat(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: [].concat(scaleAlignPrimaryAxis(), ['normal'])
}],
/**
* Justify Items
* @see https://tailwindcss.com/docs/justify-items
*/
'justify-items': [{
'justify-items': [].concat(scaleAlignSecondaryAxis(), ['normal'])
}],
/**
* Justify Self
* @see https://tailwindcss.com/docs/justify-self
*/
'justify-self': [{
'justify-self': ['auto'].concat(scaleAlignSecondaryAxis())
}],
/**
* Align Content
* @see https://tailwindcss.com/docs/align-content
*/
'align-content': [{
content: ['normal'].concat(scaleAlignPrimaryAxis())
}],
/**
* Align Items
* @see https://tailwindcss.com/docs/align-items
*/
'align-items': [{
items: [].concat(scaleAlignSecondaryAxis(), [{
baseline: ['', 'last']
}])
}],
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/
'align-self': [{
self: ['auto'].concat(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': [].concat(scaleAlignSecondaryAxis(), ['baseline'])
}],
/**
* Place Self
* @see https://tailwindcss.com/docs/place-self
*/
'place-self': [{
'place-self': ['auto'].concat(scaleAlignSecondaryAxis())
}],
// Spacing
/**
* Padding
* @see https://tailwindcss.com/docs/padding
*/
p: [{
p: scaleUnambiguousSpacing()
}],
/**
* Padding Inline
* @see https://tailwindcss.com/docs/padding
*/
px: [{
px: scaleUnambiguousSpacing()
}],
/**
* Padding Block
* @see https://tailwindcss.com/docs/padding
*/
py: [{
py: scaleUnambiguousSpacing()
}],
/**
* Padding Inline Start
* @see https://tailwindcss.com/docs/padding
*/
ps: [{
ps: scaleUnambiguousSpacing()
}],
/**
* Padding Inline End
* @see https://tailwindcss.com/docs/padding
*/
pe: [{
pe: scaleUnambiguousSpacing()
}],
/**
* Padding Block Start
* @see https://tailwindcss.com/docs/padding
*/
pbs: [{
pbs: scaleUnambiguousSpacing()
}],
/**
* Padding Block End
* @see https://tailwindcss.com/docs/padding
*/
pbe: [{
pbe: scaleUnambiguousSpacing()
}],
/**
* Padding Top
* @se