UNPKG

@preethamkrishna/twreact-ui

Version:

A comprehensive React + Tailwind components library for building modern web apps

1,708 lines (1,687 loc) 379 kB
'use strict'; var React = require('react'); var reactDom = require('react-dom'); 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); } function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = true, o = false; try { if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = true, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); } function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; } function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; } function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n} /** * 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() { var index = 0; var argument; var resolvedValue; var string = ''; while (index < arguments.length) { if (argument = arguments[index++]) { if (resolvedValue = toValue(argument)) { string && (string += ' '); string += resolvedValue; } } } return string; } function toValue(mix) { 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 CLASS_PART_SEPARATOR = '-'; function createClassUtils(config) { var classMap = createClassMap(config); var conflictingClassGroups = config.conflictingClassGroups, _config$conflictingCl = config.conflictingClassGroupModifiers, conflictingClassGroupModifiers = _config$conflictingCl === void 0 ? {} : _config$conflictingCl; function getClassGroupId(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 remove it from classParts. if (classParts[0] === '' && classParts.length !== 1) { classParts.shift(); } return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className); } function getConflictingClassGroupIds(classGroupId, hasPostfixModifier) { var conflicts = conflictingClassGroups[classGroupId] || []; if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) { return [].concat(conflicts, conflictingClassGroupModifiers[classGroupId]); } return conflicts; } return { getClassGroupId: getClassGroupId, getConflictingClassGroupIds: getConflictingClassGroupIds }; } function getGroupRecursive(classParts, classPartObject) { if (classParts.length === 0) { return classPartObject.classGroupId; } var currentClassPart = classParts[0]; var nextClassPartObject = classPartObject.nextPart.get(currentClassPart); var classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : undefined; if (classGroupFromNextClassPart) { return classGroupFromNextClassPart; } if (classPartObject.validators.length === 0) { return undefined; } var classRest = classParts.join(CLASS_PART_SEPARATOR); return classPartObject.validators.find(function (_ref) { var validator = _ref.validator; return validator(classRest); })?.classGroupId; } var arbitraryPropertyRegex = /^\[(.+)\]$/; function getGroupIdForArbitraryProperty(className) { if (arbitraryPropertyRegex.test(className)) { var arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1]; var 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 */ function createClassMap(config) { var theme = config.theme, prefix = config.prefix; var classMap = { nextPart: new Map(), validators: [] }; var prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix); prefixedClassGroupEntries.forEach(function (_ref2) { var classGroupId = _ref2[0], classGroup = _ref2[1]; processClassesRecursively(classGroup, classMap, classGroupId, theme); }); return classMap; } function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) { classGroup.forEach(function (classDefinition) { if (typeof classDefinition === 'string') { var 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: classGroupId }); return; } Object.entries(classDefinition).forEach(function (_ref3) { var key = _ref3[0], classGroup = _ref3[1]; processClassesRecursively(classGroup, getPart(classPartObject, key), classGroupId, theme); }); }); } function getPart(classPartObject, path) { var currentClassPartObject = classPartObject; path.split(CLASS_PART_SEPARATOR).forEach(function (pathPart) { if (!currentClassPartObject.nextPart.has(pathPart)) { currentClassPartObject.nextPart.set(pathPart, { nextPart: new Map(), validators: [] }); } currentClassPartObject = currentClassPartObject.nextPart.get(pathPart); }); return currentClassPartObject; } function isThemeGetter(func) { return func.isThemeGetter; } function getPrefixedClassGroupEntries(classGroupEntries, prefix) { if (!prefix) { return classGroupEntries; } return classGroupEntries.map(function (_ref4) { var classGroupId = _ref4[0], classGroup = _ref4[1]; var prefixedClassGroup = classGroup.map(function (classDefinition) { if (typeof classDefinition === 'string') { return prefix + classDefinition; } if (typeof classDefinition === 'object') { return Object.fromEntries(Object.entries(classDefinition).map(function (_ref5) { var key = _ref5[0], value = _ref5[1]; return [prefix + key, value]; })); } return classDefinition; }); return [classGroupId, prefixedClassGroup]; }); } // LRU cache inspired from hashlru (https://github.com/dominictarr/hashlru/blob/v1.0.4/index.js) but object replaced with Map to improve performance function createLruCache(maxCacheSize) { if (maxCacheSize < 1) { return { get: function get() { return undefined; }, set: function set() {} }; } var cacheSize = 0; var cache = new Map(); var previousCache = new Map(); function update(key, value) { cache.set(key, value); cacheSize++; if (cacheSize > maxCacheSize) { cacheSize = 0; previousCache = cache; cache = new Map(); } } return { get: function get(key) { var value = cache.get(key); if (value !== undefined) { return value; } if ((value = previousCache.get(key)) !== undefined) { update(key, value); return value; } }, set: function set(key, value) { if (cache.has(key)) { cache.set(key, value); } else { update(key, value); } } }; } var IMPORTANT_MODIFIER = '!'; function createSplitModifiers(config) { var separator = config.separator || ':'; var isSeparatorSingleCharacter = separator.length === 1; var firstSeparatorCharacter = separator[0]; var separatorLength = separator.length; // splitModifiers inspired by https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js return function splitModifiers(className) { var modifiers = []; var bracketDepth = 0; var modifierStart = 0; var postfixModifierPosition; for (var index = 0; index < className.length; index++) { var currentCharacter = className[index]; if (bracketDepth === 0) { if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) { modifiers.push(className.slice(modifierStart, index)); modifierStart = index + separatorLength; continue; } if (currentCharacter === '/') { postfixModifierPosition = index; continue; } } if (currentCharacter === '[') { bracketDepth++; } else if (currentCharacter === ']') { bracketDepth--; } } var baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart); var hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER); var baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier; var maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined; return { modifiers: modifiers, hasImportantModifier: hasImportantModifier, baseClassName: baseClassName, maybePostfixModifierPosition: maybePostfixModifierPosition }; }; } /** * 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 */ function sortModifiers(modifiers) { if (modifiers.length <= 1) { return modifiers; } var sortedModifiers = []; var unsortedModifiers = []; modifiers.forEach(function (modifier) { var isArbitraryVariant = modifier[0] === '['; if (isArbitraryVariant) { sortedModifiers.push.apply(sortedModifiers, unsortedModifiers.sort().concat([modifier])); unsortedModifiers = []; } else { unsortedModifiers.push(modifier); } }); sortedModifiers.push.apply(sortedModifiers, unsortedModifiers.sort()); return sortedModifiers; } function createConfigUtils(config) { return { cache: createLruCache(config.cacheSize), splitModifiers: createSplitModifiers(config), ...createClassUtils(config) }; } var SPLIT_CLASSES_REGEX = /\s+/; function mergeClassList(classList, configUtils) { var splitModifiers = configUtils.splitModifiers, getClassGroupId = configUtils.getClassGroupId, getConflictingClassGroupIds = configUtils.getConflictingClassGroupIds; /** * Set of classGroupIds in following format: * `{importantModifier}{variantModifiers}{classGroupId}` * @example 'float' * @example 'hover:focus:bg-color' * @example 'md:!pr' */ var classGroupsInConflict = new Set(); return classList.trim().split(SPLIT_CLASSES_REGEX).map(function (originalClassName) { var _splitModifiers = splitModifiers(originalClassName), modifiers = _splitModifiers.modifiers, hasImportantModifier = _splitModifiers.hasImportantModifier, baseClassName = _splitModifiers.baseClassName, maybePostfixModifierPosition = _splitModifiers.maybePostfixModifierPosition; var classGroupId = getClassGroupId(maybePostfixModifierPosition ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName); var hasPostfixModifier = Boolean(maybePostfixModifierPosition); if (!classGroupId) { if (!maybePostfixModifierPosition) { return { isTailwindClass: false, originalClassName: originalClassName }; } classGroupId = getClassGroupId(baseClassName); if (!classGroupId) { return { isTailwindClass: false, originalClassName: originalClassName }; } hasPostfixModifier = false; } var variantModifier = sortModifiers(modifiers).join(':'); var modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier; return { isTailwindClass: true, modifierId: modifierId, classGroupId: classGroupId, originalClassName: originalClassName, hasPostfixModifier: hasPostfixModifier }; }).reverse() // Last class in conflict wins, so we need to filter conflicting classes in reverse order. .filter(function (parsed) { if (!parsed.isTailwindClass) { return true; } var modifierId = parsed.modifierId, classGroupId = parsed.classGroupId, hasPostfixModifier = parsed.hasPostfixModifier; var classId = modifierId + classGroupId; if (classGroupsInConflict.has(classId)) { return false; } classGroupsInConflict.add(classId); getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach(function (group) { return classGroupsInConflict.add(modifierId + group); }); return true; }).reverse().map(function (parsed) { return parsed.originalClassName; }).join(' '); } function createTailwindMerge() { for (var _len = arguments.length, createConfig = new Array(_len), _key = 0; _key < _len; _key++) { createConfig[_key] = arguments[_key]; } var configUtils; var cacheGet; var cacheSet; var functionToCall = initTailwindMerge; function initTailwindMerge(classList) { var firstCreateConfig = createConfig[0], restCreateConfig = createConfig.slice(1); var config = restCreateConfig.reduce(function (previousConfig, createConfigCurrent) { return createConfigCurrent(previousConfig); }, firstCreateConfig()); configUtils = createConfigUtils(config); cacheGet = configUtils.cache.get; cacheSet = configUtils.cache.set; functionToCall = tailwindMerge; return tailwindMerge(classList); } function tailwindMerge(classList) { var cachedResult = cacheGet(classList); if (cachedResult) { return cachedResult; } var result = mergeClassList(classList, configUtils); cacheSet(classList, result); return result; } return function callTailwindMerge() { return functionToCall(twJoin.apply(null, arguments)); }; } function fromTheme(key) { var themeGetter = function themeGetter(theme) { return theme[key] || []; }; themeGetter.isThemeGetter = true; return themeGetter; } var arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i; var fractionRegex = /^\d+\/\d+$/; var stringLengths = /*#__PURE__*/new Set(['px', 'full', 'screen']); 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$/; // Shadow always begins with x and y offset separated by underscore var shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/; function isLength(value) { return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value) || isArbitraryLength(value); } function isArbitraryLength(value) { return getIsArbitraryValue(value, 'length', isLengthOnly); } function isArbitrarySize(value) { return getIsArbitraryValue(value, 'size', isNever); } function isArbitraryPosition(value) { return getIsArbitraryValue(value, 'position', isNever); } function isArbitraryUrl(value) { return getIsArbitraryValue(value, 'url', isUrl); } function isArbitraryNumber(value) { return getIsArbitraryValue(value, 'number', isNumber); } function isNumber(value) { return !Number.isNaN(Number(value)); } function isPercent(value) { return value.endsWith('%') && isNumber(value.slice(0, -1)); } function isInteger(value) { return isIntegerOnly(value) || getIsArbitraryValue(value, 'number', isIntegerOnly); } function isArbitraryValue(value) { return arbitraryValueRegex.test(value); } function isAny() { return true; } function isTshirtSize(value) { return tshirtUnitRegex.test(value); } function isArbitraryShadow(value) { return getIsArbitraryValue(value, '', isShadow); } function getIsArbitraryValue(value, label, testValue) { var result = arbitraryValueRegex.exec(value); if (result) { if (result[1]) { return result[1] === label; } return testValue(result[2]); } return false; } function isLengthOnly(value) { return lengthUnitRegex.test(value); } function isNever() { return false; } function isUrl(value) { return value.startsWith('url('); } function isIntegerOnly(value) { return Number.isInteger(Number(value)); } function isShadow(value) { return shadowRegex.test(value); } function getDefaultConfig() { var colors = fromTheme('colors'); var spacing = fromTheme('spacing'); var blur = fromTheme('blur'); var brightness = fromTheme('brightness'); var borderColor = fromTheme('borderColor'); var borderRadius = fromTheme('borderRadius'); var borderSpacing = fromTheme('borderSpacing'); var borderWidth = fromTheme('borderWidth'); var contrast = fromTheme('contrast'); var grayscale = fromTheme('grayscale'); var hueRotate = fromTheme('hueRotate'); var invert = fromTheme('invert'); var gap = fromTheme('gap'); var gradientColorStops = fromTheme('gradientColorStops'); var gradientColorStopPositions = fromTheme('gradientColorStopPositions'); var inset = fromTheme('inset'); var margin = fromTheme('margin'); var opacity = fromTheme('opacity'); var padding = fromTheme('padding'); var saturate = fromTheme('saturate'); var scale = fromTheme('scale'); var sepia = fromTheme('sepia'); var skew = fromTheme('skew'); var space = fromTheme('space'); var translate = fromTheme('translate'); var getOverscroll = function getOverscroll() { return ['auto', 'contain', 'none']; }; var getOverflow = function getOverflow() { return ['auto', 'hidden', 'clip', 'visible', 'scroll']; }; var getSpacingWithAutoAndArbitrary = function getSpacingWithAutoAndArbitrary() { return ['auto', isArbitraryValue, spacing]; }; var getSpacingWithArbitrary = function getSpacingWithArbitrary() { return [isArbitraryValue, spacing]; }; var getLengthWithEmpty = function getLengthWithEmpty() { return ['', isLength]; }; var getNumberWithAutoAndArbitrary = function getNumberWithAutoAndArbitrary() { return ['auto', isNumber, isArbitraryValue]; }; var getPositions = function getPositions() { return ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top']; }; var getLineStyles = function getLineStyles() { return ['solid', 'dashed', 'dotted', 'double', 'none']; }; var getBlendModes = function getBlendModes() { return ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'plus-lighter']; }; var getAlign = function getAlign() { return ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch']; }; var getZeroAndEmpty = function getZeroAndEmpty() { return ['', '0', isArbitraryValue]; }; var getBreaks = function getBreaks() { return ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column']; }; var getNumber = function getNumber() { return [isNumber, isArbitraryNumber]; }; var getNumberAndArbitrary = function getNumberAndArbitrary() { return [isNumber, isArbitraryValue]; }; return { cacheSize: 500, theme: { colors: [isAny], spacing: [isLength], blur: ['none', '', isTshirtSize, isArbitraryValue], brightness: getNumber(), borderColor: [colors], borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryValue], borderSpacing: getSpacingWithArbitrary(), borderWidth: getLengthWithEmpty(), contrast: getNumber(), grayscale: getZeroAndEmpty(), hueRotate: getNumberAndArbitrary(), invert: getZeroAndEmpty(), gap: getSpacingWithArbitrary(), gradientColorStops: [colors], gradientColorStopPositions: [isPercent, isArbitraryLength], inset: getSpacingWithAutoAndArbitrary(), margin: getSpacingWithAutoAndArbitrary(), opacity: getNumber(), padding: getSpacingWithArbitrary(), saturate: getNumber(), scale: getNumber(), sepia: getZeroAndEmpty(), skew: getNumberAndArbitrary(), space: getSpacingWithArbitrary(), translate: getSpacingWithArbitrary() }, classGroups: { // Layout /** * Aspect Ratio * @see https://tailwindcss.com/docs/aspect-ratio */ aspect: [{ aspect: ['auto', 'square', 'video', isArbitraryValue] }], /** * Container * @see https://tailwindcss.com/docs/container */ container: ['container'], /** * Columns * @see https://tailwindcss.com/docs/columns */ columns: [{ columns: [isTshirtSize] }], /** * Break After * @see https://tailwindcss.com/docs/break-after */ 'break-after': [{ 'break-after': getBreaks() }], /** * Break Before * @see https://tailwindcss.com/docs/break-before */ 'break-before': [{ 'break-before': getBreaks() }], /** * 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'], /** * Floats * @see https://tailwindcss.com/docs/float */ "float": [{ "float": ['right', 'left', 'none'] }], /** * Clear * @see https://tailwindcss.com/docs/clear */ clear: [{ clear: ['left', 'right', 'both', 'none'] }], /** * 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: [].concat(getPositions(), [isArbitraryValue]) }], /** * Overflow * @see https://tailwindcss.com/docs/overflow */ overflow: [{ overflow: getOverflow() }], /** * Overflow X * @see https://tailwindcss.com/docs/overflow */ 'overflow-x': [{ 'overflow-x': getOverflow() }], /** * Overflow Y * @see https://tailwindcss.com/docs/overflow */ 'overflow-y': [{ 'overflow-y': getOverflow() }], /** * Overscroll Behavior * @see https://tailwindcss.com/docs/overscroll-behavior */ overscroll: [{ overscroll: getOverscroll() }], /** * Overscroll Behavior X * @see https://tailwindcss.com/docs/overscroll-behavior */ 'overscroll-x': [{ 'overscroll-x': getOverscroll() }], /** * Overscroll Behavior Y * @see https://tailwindcss.com/docs/overscroll-behavior */ 'overscroll-y': [{ 'overscroll-y': getOverscroll() }], /** * 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: [inset] }], /** * Right / Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ 'inset-x': [{ 'inset-x': [inset] }], /** * Top / Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ 'inset-y': [{ 'inset-y': [inset] }], /** * Start * @see https://tailwindcss.com/docs/top-right-bottom-left */ start: [{ start: [inset] }], /** * End * @see https://tailwindcss.com/docs/top-right-bottom-left */ end: [{ end: [inset] }], /** * Top * @see https://tailwindcss.com/docs/top-right-bottom-left */ top: [{ top: [inset] }], /** * Right * @see https://tailwindcss.com/docs/top-right-bottom-left */ right: [{ right: [inset] }], /** * Bottom * @see https://tailwindcss.com/docs/top-right-bottom-left */ bottom: [{ bottom: [inset] }], /** * Left * @see https://tailwindcss.com/docs/top-right-bottom-left */ left: [{ left: [inset] }], /** * Visibility * @see https://tailwindcss.com/docs/visibility */ visibility: ['visible', 'invisible', 'collapse'], /** * Z-Index * @see https://tailwindcss.com/docs/z-index */ z: [{ z: ['auto', isInteger] }], // Flexbox and Grid /** * Flex Basis * @see https://tailwindcss.com/docs/flex-basis */ basis: [{ basis: getSpacingWithAutoAndArbitrary() }], /** * 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: ['wrap', 'wrap-reverse', 'nowrap'] }], /** * Flex * @see https://tailwindcss.com/docs/flex */ flex: [{ flex: ['1', 'auto', 'initial', 'none', isArbitraryValue] }], /** * Flex Grow * @see https://tailwindcss.com/docs/flex-grow */ grow: [{ grow: getZeroAndEmpty() }], /** * Flex Shrink * @see https://tailwindcss.com/docs/flex-shrink */ shrink: [{ shrink: getZeroAndEmpty() }], /** * Order * @see https://tailwindcss.com/docs/order */ order: [{ order: ['first', 'last', 'none', isInteger] }], /** * Grid Template Columns * @see https://tailwindcss.com/docs/grid-template-columns */ 'grid-cols': [{ 'grid-cols': [isAny] }], /** * Grid Column Start / End * @see https://tailwindcss.com/docs/grid-column */ 'col-start-end': [{ col: ['auto', { span: ['full', isInteger] }, isArbitraryValue] }], /** * Grid Column Start * @see https://tailwindcss.com/docs/grid-column */ 'col-start': [{ 'col-start': getNumberWithAutoAndArbitrary() }], /** * Grid Column End * @see https://tailwindcss.com/docs/grid-column */ 'col-end': [{ 'col-end': getNumberWithAutoAndArbitrary() }], /** * Grid Template Rows * @see https://tailwindcss.com/docs/grid-template-rows */ 'grid-rows': [{ 'grid-rows': [isAny] }], /** * Grid Row Start / End * @see https://tailwindcss.com/docs/grid-row */ 'row-start-end': [{ row: ['auto', { span: [isInteger] }, isArbitraryValue] }], /** * Grid Row Start * @see https://tailwindcss.com/docs/grid-row */ 'row-start': [{ 'row-start': getNumberWithAutoAndArbitrary() }], /** * Grid Row End * @see https://tailwindcss.com/docs/grid-row */ 'row-end': [{ 'row-end': getNumberWithAutoAndArbitrary() }], /** * 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': ['auto', 'min', 'max', 'fr', isArbitraryValue] }], /** * Grid Auto Rows * @see https://tailwindcss.com/docs/grid-auto-rows */ 'auto-rows': [{ 'auto-rows': ['auto', 'min', 'max', 'fr', isArbitraryValue] }], /** * Gap * @see https://tailwindcss.com/docs/gap */ gap: [{ gap: [gap] }], /** * Gap X * @see https://tailwindcss.com/docs/gap */ 'gap-x': [{ 'gap-x': [gap] }], /** * Gap Y * @see https://tailwindcss.com/docs/gap */ 'gap-y': [{ 'gap-y': [gap] }], /** * Justify Content * @see https://tailwindcss.com/docs/justify-content */ 'justify-content': [{ justify: ['normal'].concat(getAlign()) }], /** * Justify Items * @see https://tailwindcss.com/docs/justify-items */ 'justify-items': [{ 'justify-items': ['start', 'end', 'center', 'stretch'] }], /** * Justify Self * @see https://tailwindcss.com/docs/justify-self */ 'justify-self': [{ 'justify-self': ['auto', 'start', 'end', 'center', 'stretch'] }], /** * Align Content * @see https://tailwindcss.com/docs/align-content */ 'align-content': [{ content: ['normal'].concat(getAlign(), ['baseline']) }], /** * Align Items * @see https://tailwindcss.com/docs/align-items */ 'align-items': [{ items: ['start', 'end', 'center', 'baseline', 'stretch'] }], /** * Align Self * @see https://tailwindcss.com/docs/align-self */ 'align-self': [{ self: ['auto', 'start', 'end', 'center', 'stretch', 'baseline'] }], /** * Place Content * @see https://tailwindcss.com/docs/place-content */ 'place-content': [{ 'place-content': [].concat(getAlign(), ['baseline']) }], /** * Place Items * @see https://tailwindcss.com/docs/place-items */ 'place-items': [{ 'place-items': ['start', 'end', 'center', 'baseline', 'stretch'] }], /** * Place Self * @see https://tailwindcss.com/docs/place-self */ 'place-self': [{ 'place-self': ['auto', 'start', 'end', 'center', 'stretch'] }], // Spacing /** * Padding * @see https://tailwindcss.com/docs/padding */ p: [{ p: [padding] }], /** * Padding X * @see https://tailwindcss.com/docs/padding */ px: [{ px: [padding] }], /** * Padding Y * @see https://tailwindcss.com/docs/padding */ py: [{ py: [padding] }], /** * Padding Start * @see https://tailwindcss.com/docs/padding */ ps: [{ ps: [padding] }], /** * Padding End * @see https://tailwindcss.com/docs/padding */ pe: [{ pe: [padding] }], /** * Padding Top * @see https://tailwindcss.com/docs/padding */ pt: [{ pt: [padding] }], /** * Padding Right * @see https://tailwindcss.com/docs/padding */ pr: [{ pr: [padding] }], /** * Padding Bottom * @see https://tailwindcss.com/docs/padding */ pb: [{ pb: [padding] }], /** * Padding Left * @see https://tailwindcss.com/docs/padding */ pl: [{ pl: [padding] }], /** * Margin * @see https://tailwindcss.com/docs/margin */ m: [{ m: [margin] }], /** * Margin X * @see https://tailwindcss.com/docs/margin */ mx: [{ mx: [margin] }], /** * Margin Y * @see https://tailwindcss.com/docs/margin */ my: [{ my: [margin] }], /** * Margin Start * @see https://tailwindcss.com/docs/margin */ ms: [{ ms: [margin] }], /** * Margin End * @see https://tailwindcss.com/docs/margin */ me: [{ me: [margin] }], /** * Margin Top * @see https://tailwindcss.com/docs/margin */ mt: [{ mt: [margin] }], /** * Margin Right * @see https://tailwindcss.com/docs/margin */ mr: [{ mr: [margin] }], /** * Margin Bottom * @see https://tailwindcss.com/docs/margin */ mb: [{ mb: [margin] }], /** * Margin Left * @see https://tailwindcss.com/docs/margin */ ml: [{ ml: [margin] }], /** * Space Between X * @see https://tailwindcss.com/docs/space */ 'space-x': [{ 'space-x': [space] }], /** * Space Between X Reverse * @see https://tailwindcss.com/docs/space */ 'space-x-reverse': ['space-x-reverse'], /** * Space Between Y * @see https://tailwindcss.com/docs/space */ 'space-y': [{ 'space-y': [space] }], /** * Space Between Y Reverse * @see https://tailwindcss.com/docs/space */ 'space-y-reverse': ['space-y-reverse'], // Sizing /** * Width * @see https://tailwindcss.com/docs/width */ w: [{ w: ['auto', 'min', 'max', 'fit', isArbitraryValue, spacing] }], /** * Min-Width * @see https://tailwindcss.com/docs/min-width */ 'min-w': [{ 'min-w': ['min', 'max', 'fit', isArbitraryValue, isLength] }], /** * Max-Width * @see https://tailwindcss.com/docs/max-width */ 'max-w': [{ 'max-w': ['0', 'none', 'full', 'min', 'max', 'fit', 'prose', { screen: [isTshirtSize] }, isTshirtSize, isArbitraryValue] }], /** * Height * @see https://tailwindcss.com/docs/height */ h: [{ h: [isArbitraryValue, spacing, 'auto', 'min', 'max', 'fit'] }], /** * Min-Height * @see https://tailwindcss.com/docs/min-height */ 'min-h': [{ 'min-h': ['min', 'max', 'fit', isArbitraryValue, isLength] }], /** * Max-Height * @see https://tailwindcss.com/docs/max-height */ 'max-h': [{ 'max-h': [isArbitraryValue, spacing, 'min', 'max', 'fit'] }], // Typography /** * Font Size * @see https://tailwindcss.com/docs/font-size */ 'font-size': [{ text: ['base', isTshirtSize, 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: ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black', isArbitraryNumber] }], /** * Font Family * @see https://tailwindcss.com/docs/font-family */ 'font-family': [{ font: [isAny] }], /** * 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-fractons'], /** * Letter Spacing * @see https://tailwindcss.com/docs/letter-spacing */ tracking: [{ tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest', isArbitraryValue] }], /** * Line Clamp * @see https://tailwindcss.com/docs/line-clamp */ 'line-clamp': [{ 'line-clamp': ['none', isNumber, isArbitraryNumber] }], /** * Line Height * @see https://tailwindcss.com/docs/line-height */ leading: [{ leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isArbitraryValue, isLength] }], /** * List Style Image * @see https://tailwindcss.com/docs/list-style-image */ 'list-image': [{ 'list-image': ['none', isArbitraryValue] }], /** * List Style Type * @see https://tailwindcss.com/docs/list-style-type */ 'list-style-type': [{ list: ['none', 'disc', 'decimal', isArbitraryValue] }], /** * List Style Position * @see https://tailwindcss.com/docs/list-style-position */ 'list-style-position': [{ list: ['inside', 'outside'] }], /** * Placeholder Color * @deprecated since Tailwind CSS v3.0.0 * @see https://tailwindcss.com/docs/placeholder-color */ 'placeholder-color': [{ placeholder: [colors] }], /** * Placeholder Opacity * @see https://tailwindcss.com/docs/placeholder-opacity */ 'placeholder-opacity': [{ 'placeholder-opacity': [opacity] }], /** * Text Alignment * @see https://tailwindcss.com/docs/text-align */ 'text-alignment': [{ text: ['left', 'center', 'right', 'justify', 'start', 'end'] }], /** * Text Color * @see https://tailwindcss.com/docs/text-color */ 'text-color': [{ text: [colors] }], /** * Text Opacity * @see https://tailwindcss.com/docs/text-opacity */ 'text-opacity': [{ 'text-opacity': [opacity] }], /** * 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: [].concat(getLineStyles(), ['wavy']) }], /** * Text Decoration Thickness * @see https://tailwindcss.com/docs/text-decoration-thickness */ 'text-decoration-thickness': [{ decoration: ['auto', 'from-font', isLength] }], /** * Text Underline Offset * @see https://tailwindcss.com/docs/text-underline-offset */ 'underline-offset': [{ 'underline-offset': ['auto', isArbitraryValue, isLength] }], /** * Text Decoration Color * @see https://tailwindcss.com/docs/text-decoration-color */ 'text-decoration-color': [{ decoration: [colors] }], /** * 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 Indent * @see https://tailwindcss.com/docs/text-indent */ indent: [{ indent: getSpacingWithArbitrary() }], /** * Vertical Alignment * @see https://tailwindcss.com/docs/vertical-align */ 'vertical-align': [{ align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', isArbitraryValue] }], /** * Whitespace * @see https://tailwindcss.com/docs/whitespace */ whitespace: [{ whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'] }], /** * Word Break * @see https://tailwindcss.com/docs/word-break */ "break": [{ "break": ['normal', 'words', 'all', 'keep'] }], /** * Hyphens * @see https://tailwindcss.com/docs/hyphens */ hyphens: [{ hyphens: ['none', 'manual', 'auto'] }], /** * Content * @see https://tailwindcss.com/docs/content */ content: [{ content: ['none', 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 Opacity * @deprecated since Tailwind CSS v3.0.0 * @see https://tailwindcss.com/docs/background-opacity */ 'bg-opacity': [{ 'bg-opacity': [opacity] }], /** * 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: [].concat(getPositions(), [isArbitraryPosition]) }], /** * Background Repeat * @see https://tailwindcss.com/docs/background-repeat */ 'bg-repeat': [{ bg: ['no-repeat', { repeat: ['', 'x', 'y', 'round', 'space'] }] }], /** * Background Size * @see https://tailwindcss.com/docs/background-size */ 'bg-size': [{ bg: ['auto', 'cover', 'contain', isArbitrarySize] }], /** * Background Image * @see https://tailwindcss.com/docs/background-image */ 'bg-image': [{ bg: ['none', { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] }, isArbitraryUrl] }], /** * Background Color * @see https://tailwindcss.com/docs/background-color */ 'bg-color': [{ bg: [colors] }], /** * Gradient Color Stops From Position * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-from-pos': [{ from: [gradientColorStopPositions] }], /** * Gradient Color Stops Via Position * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-via-pos': [{ via: [gradientColorStopPositions] }], /** * Gradient Color Stops To Position * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-to-pos': [{ to: [gradientColorStopPositions] }], /** * Gradient Color Stops From * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-from': [{ from: [gradientColorStops] }], /** * Gradient Color Stops Via * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-via': [{ via: [gradientColorStops] }], /** * Gradient Color Stops To * @see https://tailwindcss.com/docs/gradient-color-stops */ 'gradient-to': [{ to: [gradientColorStops] }], // Borders /** * Border Radius * @see https://tailwindcss.com/docs/border-radius */ rounded: [{ rounded: [borderRadius] }], /** * Border Radius Start * @see https://tailwindcss.com/docs/border-radius */ 'rounded-s': [{ 'rounded-s': [borderRadius] }], /** * Border Radius End * @see https://tailwindcss.com/docs/border-radius */ 'rounded-e': [{ 'rounded-e': [borderRadius] }], /** * Border Radius Top * @see https://tailwindcss.com/docs/border-radius */ 'rounded-t': [{ 'rounded-t': [borderRadius] }], /** * Border Radius Right * @see https://tailwindcss.com/docs/border-radius */ 'rounded-r': [{ 'rounded-r': [borderRadius] }], /** * Border Radius Bottom * @see https://tailwindcss.com/docs/border-radius */ 'rounded-b': [{ 'rounded-b': [borderRadius] }], /** * Border Radius Left * @see https://tailwindcss.com/docs/border-radius */ 'rounded-l': [{ 'rounded-l': [borderRadius] }], /** * Border Radius Start Start * @see https://tailwindcss.com/docs/border-radius */ 'rounded-ss': [{ 'rounded-ss': [borderRadius] }], /** * Border Radius Start End * @see https://tailwindcss.com/docs/border-radius */ 'rounded-se': [{ 'rounded-se': [borderRadius] }], /** * Border Radius End End * @see https://tailwindcss.com/docs/border-radius */ 'rounded-ee': [{ 'rounded-ee': [borderRadius] }], /** * Border Radius End Start * @see https://tailwindcss.com/docs/border-radius */ 'rounded-es': [{ 'ro