tailwind-merge - npm Package Compare versions

Comparing version 0.9.0 to 1.0.0

dist/index.js

@@ -43,3 +43,3 @@ import HLRU from 'hashlru';
 
-    return getGroupRecursive(classParts, classMap);
+    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
   }
@@ -81,2 +81,16 @@
 }
+
+const arbitraryPropertyRegex = /^\[(.+)\]$/;
+
+function getGroupIdForArbitraryProperty(className) {
+  if (arbitraryPropertyRegex.test(className)) {
+    const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
+    const property = arbitraryPropertyClassName == null ? void 0 : 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;
+    }
+  }
+}
 /**
@@ -154,3 +168,3 @@ * Exported for testing only
 const SPLIT_CLASSES_REGEX = /\s+/;
-const IMPORTANT_MODIFIER = '!'; // Regex is needed so we don't match against colons in labels for custom values like `text-[color:var(--mystery-var)]`
+const IMPORTANT_MODIFIER = '!'; // Regex is needed so we don't match against colons in labels for arbitrary values like `text-[color:var(--mystery-var)]`
 // I'd prefer to use a negative lookbehind for all supported labels, but lookbheinds don't have good browser support yet. More info: https://caniuse.com/js-regexp-lookbehind
@@ -268,16 +282,17 @@
 
-const customValueRegex = /^\[(.+)\]$/;
+const arbitraryValueRegex = /^\[(.+)\]$/;
 const fractionRegex = /^\d+\/\d+$/;
 const stringLengths = new Set(['px', 'full', 'screen']);
+const tshirtUnitRegex = /^(\d+)?(xs|sm|md|lg|xl)$/;
 const lengthUnitRegex = /\d+(%|px|em|rem|vh|vw|pt|pc|in|cm|mm|cap|ch|ex|lh|rlh|vi|vb|vmin|vmax)/;
 function isLength(classPart) {
-  return isCustomLength(classPart) || !Number.isNaN(Number(classPart)) || stringLengths.has(classPart) || fractionRegex.test(classPart);
+  return !Number.isNaN(Number(classPart)) || stringLengths.has(classPart) || fractionRegex.test(classPart) || isArbitraryLength(classPart);
 }
-function isCustomLength(classPart) {
-  var _customValueRegex$exe;
+function isArbitraryLength(classPart) {
+  var _arbitraryValueRegex$;
 
-  const customValue = (_customValueRegex$exe = customValueRegex.exec(classPart)) == null ? void 0 : _customValueRegex$exe[1];
+  const arbitraryValue = (_arbitraryValueRegex$ = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$[1];
 
-  if (customValue) {
-    return customValue.startsWith('length:') || lengthUnitRegex.test(customValue);
+  if (arbitraryValue) {
+    return arbitraryValue.startsWith('length:') || lengthUnitRegex.test(arbitraryValue);
   }
@@ -287,9 +302,33 @@
 }
+function isArbitrarySize(classPart) {
+  var _arbitraryValueRegex$2;
+
+  const arbitraryValue = (_arbitraryValueRegex$2 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$2[1];
+  return arbitraryValue ? arbitraryValue.startsWith('size:') : false;
+}
+function isArbitraryPosition(classPart) {
+  var _arbitraryValueRegex$3;
+
+  const arbitraryValue = (_arbitraryValueRegex$3 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$3[1];
+  return arbitraryValue ? arbitraryValue.startsWith('position:') : false;
+}
+function isArbitraryUrl(classPart) {
+  var _arbitraryValueRegex$4;
+
+  const arbitraryValue = (_arbitraryValueRegex$4 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$4[1];
+  return arbitraryValue ? arbitraryValue.startsWith('url(') || arbitraryValue.startsWith('url:') : false;
+}
+function isArbitraryWeight(classPart) {
+  var _arbitraryValueRegex$5;
+
+  const arbitraryValue = (_arbitraryValueRegex$5 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$5[1];
+  return arbitraryValue ? !Number.isNaN(Number(arbitraryValue)) || arbitraryValue.startsWith('weight:') : false;
+}
 function isInteger(classPart) {
-  var _customValueRegex$exe2;
+  var _arbitraryValueRegex$6;
 
-  const customValue = (_customValueRegex$exe2 = customValueRegex.exec(classPart)) == null ? void 0 : _customValueRegex$exe2[1];
+  const arbitraryValue = (_arbitraryValueRegex$6 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$6[1];
 
-  if (customValue) {
-    return Number.isInteger(Number(customValue));
+  if (arbitraryValue) {
+    return Number.isInteger(Number(arbitraryValue));
   }
@@ -299,4 +338,4 @@
 }
-function isCustomValue(classPart) {
-  return customValueRegex.test(classPart);
+function isArbitraryValue(classPart) {
+  return arbitraryValueRegex.test(classPart);
 }
@@ -306,2 +345,5 @@ function isAny() {
 }
+function isTshirtSize(classPart) {
+  return tshirtUnitRegex.test(classPart);
+}
 
@@ -311,6 +353,11 @@ var validators = {
   isLength: isLength,
-  isCustomLength: isCustomLength,
+  isArbitraryLength: isArbitraryLength,
+  isArbitrarySize: isArbitrarySize,
+  isArbitraryPosition: isArbitraryPosition,
+  isArbitraryUrl: isArbitraryUrl,
+  isArbitraryWeight: isArbitraryWeight,
   isInteger: isInteger,
-  isCustomValue: isCustomValue,
-  isAny: isAny
+  isArbitraryValue: isArbitraryValue,
+  isAny: isAny,
+  isTshirtSize: isTshirtSize
 };
@@ -343,9 +390,5 @@
 
-  const getSizesSimple = () => ['sm', 'md', 'lg', 'xl', '2xl'];
-
-  const getSizesExtended = () => ['3xl', '4xl', '5xl', '6xl', '7xl'];
-
   const getOverscroll = () => ['auto', 'contain', 'none'];
 
-  const getOverflow = () => ['auto', 'hidden', 'visible', 'scroll'];
+  const getOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
 
@@ -360,3 +403,3 @@ const getSpacingWithAuto = () => ['auto', spacing];
 
-  const getBorderStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'];
+  const getLineStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'];
 
@@ -371,2 +414,4 @@ const getBlendModes = () => [{
 
+  const getBreaks = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
+
   return {
@@ -377,6 +422,6 @@ cacheSize: 500,
       spacing: [isLength],
-      blur: ['none', '', ...getSizesSimple(), '3xl', isCustomLength],
+      blur: ['none', '', isTshirtSize, isArbitraryLength],
       brightness: [isInteger],
       borderColor: [colors],
-      borderRadius: ['none', '', ...getSizesSimple(), '3xl', 'full', isCustomLength],
+      borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryLength],
       borderWidth: getLengthWithEmpty(),
@@ -398,145 +443,3 @@ contrast: [isInteger],
       space: [spacing],
-      translate: [spacing] // Tailwind theme keys not in use because they would apply only to a single classGroup:
-      // animation: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue],
-      // backdropBlur: [blur],
-      // backdropBrightness: [brightness],
-      // backdropContrast: [contrast],
-      // backdropGrayscale: [grayscale],
-      // backdropHueRotate: [hueRotate],
-      // backdropInvert: [invert],
-      // backdropOpacity: [opacity],
-      // backdropSaturate: [saturate],
-      // backdropSepia: [sepia],
-      // backgroundColor: [colors],
-      // backgroundImage: [
-      //     'none',
-      //     { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] },
-      // ],
-      // backgroundOpacity: [opacity],
-      // backgroundPosition: getPositions(),
-      // backgroundSize: ['auto', 'cover', 'contain'],
-      // borderOpacity: [opacity],
-      // boxShadow: ['', ...getSizesSimple(), 'inner', 'none'],
-      // caretColor: [colors],
-      // container: ['container'],
-      // content: [isCustomValue],
-      // cursor: [
-      //     'auto',
-      //     'default',
-      //     'pointer',
-      //     'wait',
-      //     'text',
-      //     'move',
-      //     'help',
-      //     'not-allowed',
-      //     isCustomValue,
-      // ],
-      // divideColor: [borderColor],
-      // divideOpacity: [borderOpacity],
-      // divideWidth: [borderWidth],
-      // dropShadow: ['', ...getSizesSimple(), 'none'],
-      // fill: ['current', isCustomValue],
-      // flex: ['1', 'auto', 'initial', 'none', isCustomValue],
-      // flexGrow: getZeroAndEmpty(),
-      // flexShrink: getZeroAndEmpty(),
-      // fontFamily: [isAny],
-      // fontSize: [
-      //     'xs',
-      //     ...getSizesSimple(),
-      //     'base',
-      //     ...getSizesExtended(),
-      //     '8xl',
-      //     '9xl',
-      //     isCustomLength,
-      // ],
-      // fontWeight: [
-      //     'thin',
-      //     'extralight',
-      //     'light',
-      //     'normal',
-      //     'medium',
-      //     'semibold',
-      //     'bold',
-      //     'extrabold',
-      //     'black',
-      // ],
-      // gridAutoColumns: ['auto', 'min', 'max', 'fr', isCustomValue],
-      // gridAutoRows: ['auto', 'min', 'max', 'fr', isCustomValue],
-      // gridColumn: ['auto', { span: [isInteger] }],
-      // gridColumnEnd: getIntegerWithAuto(),
-      // gridColumnStart: getIntegerWithAuto(),
-      // gridRow: ['auto', { span: [isInteger] }],
-      // gridRowStart: getIntegerWithAuto(),
-      // gridRowEnd: getIntegerWithAuto(),
-      // gridTemplateColumns: [isAny],
-      // gridTemplateRows: [isAny],
-      // height: getSpacingWithAuto(),
-      // letterSpacing: [
-      //     'tighter',
-      //     'tight',
-      //     'normal',
-      //     'wide',
-      //     'wider',
-      //     'widest',
-      //     isCustomLength,
-      // ],
-      // lineHeight: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength],
-      // listStyleType: ['none', 'disc', 'decimal', isCustomValue],
-      // maxHeight: [spacing],
-      // maxWidth: [
-      //     '0',
-      //     'none',
-      //     ...getSizesSimple(),
-      //     ...getSizesExtended(),
-      //     'full',
-      //     'min',
-      //     'max',
-      //     'prose',
-      //     { screen: getSizesSimple() },
-      //     isCustomLength,
-      // ],
-      // minHeight: ['full', 'screen', isLength],
-      // minWidth: ['full', 'min', 'max', isLength],
-      // objectPosition: getPositions(),
-      // order: ['first', 'last', 'none', isInteger],
-      // outline: ['none', 'white', 'black'],
-      // placeholderColor: [colors],
-      // placeholderOpacity: [opacity],
-      // ringColor: [colors],
-      // ringOffsetColor: [colors],
-      // ringOffsetWidth: [isLength],
-      // ringOpacity: [opacity],
-      // ringWidth: getLengthWithEmpty(),
-      // rotate: [isInteger],
-      // stroke: ['current', isCustomValue],
-      // strokeWidth: [isLength],
-      // textColor: [colors],
-      // textOpacity: [opacity],
-      // transformOrigin: [
-      //     'center',
-      //     'top',
-      //     'top-right',
-      //     'right',
-      //     'bottom-right',
-      //     'bottom',
-      //     'bottom-left',
-      //     'left',
-      //     'top-left',
-      // ],
-      // transitionDelay: [isInteger],
-      // transitionDuration: [isInteger],
-      // transitionProperty: [
-      //     'none',
-      //     'all',
-      //     '',
-      //     'colors',
-      //     'opacity',
-      //     'shadow',
-      //     'transform',
-      //     isCustomValue,
-      // ],
-      // transitionTimingFunction: ['linear', 'in', 'out', 'in-out', isCustomValue],
-      // width: ['auto', 'min', 'max', spacing],
-      // zIndex: [isLength],
-
+      translate: [spacing]
     },
@@ -547,2 +450,10 @@ classGroups: {
       /**
+       * Aspect Ratio
+       * @see https://tailwindcss.com/docs/aspect-ratio
+       */
+      aspect: [{
+        aspect: ['auto', 'square', 'video', isArbitraryValue]
+      }],
+
+      /**
        * Container
@@ -554,7 +465,39 @@ * @see https://tailwindcss.com/docs/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-before': ['auto', 'avoid', 'avoid-page', 'avoid-column']
+      }],
+
+      /**
        * Box Decoration Break
        * @see https://tailwindcss.com/docs/box-decoration-break
        */
-      decoration: [{
-        decoration: ['slice', 'clone']
+      'box-decoration': [{
+        'box-decoration': ['slice', 'clone']
       }],
@@ -740,2 +683,10 @@
       /**
+       * Flex Basis
+       * @see https://tailwindcss.com/docs/flex-basis
+       */
+      basis: [{
+        basis: [spacing]
+      }],
+
+      /**
        * Flex Direction
@@ -761,3 +712,3 @@ * @see https://tailwindcss.com/docs/flex-direction
       flex: [{
-        flex: ['1', 'auto', 'initial', 'none', isCustomValue]
+        flex: ['1', 'auto', 'initial', 'none', isArbitraryValue]
       }],
@@ -769,4 +720,4 @@
        */
-      'flex-grow': [{
-        'flex-grow': getZeroAndEmpty()
+      grow: [{
+        grow: getZeroAndEmpty()
       }],
@@ -778,4 +729,4 @@
        */
-      'flex-shrink': [{
-        'flex-shrink': getZeroAndEmpty()
+      shrink: [{
+        shrink: getZeroAndEmpty()
       }],
@@ -872,3 +823,3 @@
       'auto-cols': [{
-        'auto-cols': ['auto', 'min', 'max', 'fr', isCustomValue]
+        'auto-cols': ['auto', 'min', 'max', 'fr', isArbitraryValue]
       }],
@@ -881,3 +832,3 @@
       'auto-rows': [{
-        'auto-rows': ['auto', 'min', 'max', 'fr', isCustomValue]
+        'auto-rows': ['auto', 'min', 'max', 'fr', isArbitraryValue]
       }],
@@ -1136,3 +1087,3 @@
       'min-w': [{
-        'min-w': ['full', 'min', 'max', isLength]
+        'min-w': ['min', 'max', 'fit', isLength]
       }],
@@ -1145,5 +1096,5 @@
       'max-w': [{
-        'max-w': ['0', 'none', ...getSizesSimple(), ...getSizesExtended(), 'full', 'min', 'max', 'prose', {
-          screen: getSizesSimple()
-        }, isCustomLength]
+        'max-w': ['0', 'none', 'full', 'min', 'max', 'fit', 'prose', {
+          screen: [isTshirtSize]
+        }, isTshirtSize, isArbitraryLength]
       }],
@@ -1164,3 +1115,3 @@
       'min-h': [{
-        'min-h': ['full', 'screen', isLength]
+        'min-h': ['min', 'max', 'fit', isLength]
       }],
@@ -1173,3 +1124,3 @@
       'max-h': [{
-        'max-h': [spacing]
+        'max-h': [spacing, 'min', 'max', 'fit']
       }],
@@ -1179,10 +1130,2 @@ // Typography
       /**
-       * Font Family
-       * @see https://tailwindcss.com/docs/font-family
-       */
-      'font-family': [{
-        font: [isAny]
-      }],
-
-      /**
        * Font Size
@@ -1192,3 +1135,3 @@ * @see https://tailwindcss.com/docs/font-size
       'font-size': [{
-        text: ['xs', ...getSizesSimple(), 'base', ...getSizesExtended(), '8xl', '9xl', isCustomLength]
+        text: ['base', isTshirtSize, isArbitraryLength]
       }],
@@ -1213,6 +1156,14 @@
       'font-weight': [{
-        font: ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black']
+        font: ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black', isArbitraryWeight]
       }],
 
       /**
+       * Font Family
+       * @see https://tailwindcss.com/docs/font-family
+       */
+      'font-family': [{
+        font: [isAny]
+      }],
+
+      /**
        * Font Variant Numeric
@@ -1258,3 +1209,3 @@ * @see https://tailwindcss.com/docs/font-variant-numeric
       tracking: [{
-        tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest', isCustomLength]
+        tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest', isArbitraryLength]
       }],
@@ -1275,3 +1226,3 @@
       'list-style-type': [{
-        list: ['none', 'disc', 'decimal', isCustomValue]
+        list: ['none', 'disc', 'decimal', isArbitraryValue]
       }],
@@ -1334,2 +1285,26 @@
       /**
+       * Text Decoration Style
+       * @see https://tailwindcss.com/docs/text-decoration-style
+       */
+      'text-decoration-style': [{
+        decoration: [...getLineStyles(), 'wavy']
+      }],
+
+      /**
+       * Text Decoration Thickness
+       * @see https://tailwindcss.com/docs/text-decoration-thickness
+       */
+      'text-decoration-thickness': [{
+        decoration: ['auto', 'from-font', isLength]
+      }],
+
+      /**
+       * Text Decoration Color
+       * @see https://tailwindcss.com/docs/text-decoration-color
+       */
+      'text-decoration-color': [{
+        decoration: [colors]
+      }],
+
+      /**
        * Text Transform
@@ -1341,13 +1316,29 @@ * @see https://tailwindcss.com/docs/text-transform
       /**
+       * Scroll Behavior
+       * @see https://github.com/tailwindlabs/tailwindcss.com/issues/1016
+       */
+      'scroll-behavior': [{
+        scroll: ['smooth', 'auto']
+      }],
+
+      /**
        * Text Overflow
        * @see https://tailwindcss.com/docs/text-overflow
        */
-      'text-overflow': ['truncate', 'overflow-ellipsis', 'overflow-clip'],
+      'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'],
 
       /**
+       * Text Indent
+       * @see https://tailwindcss.com/docs/text-indent
+       */
+      indent: [{
+        indent: [spacing]
+      }],
+
+      /**
        * Vertical Alignment
        * @see https://tailwindcss.com/docs/vertical-align
        */
-      'vertival-alignment': [{
-        align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom']
+      'vertical-align': [{
+        align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', isArbitraryLength]
       }],
@@ -1409,3 +1400,3 @@
       'bg-position': [{
-        bg: getPositions()
+        bg: [...getPositions(), isArbitraryPosition]
       }],
@@ -1428,3 +1419,3 @@
       'bg-size': [{
-        bg: ['auto', 'cover', 'contain']
+        bg: ['auto', 'cover', 'contain', isArbitrarySize]
       }],
@@ -1439,3 +1430,3 @@
           'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
-        }]
+        }, isArbitraryUrl]
       }],
@@ -1565,2 +1556,18 @@
       /**
+       * Border Width X
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-x': [{
+        'border-x': [borderWidth]
+      }],
+
+      /**
+       * Border Width Y
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-y': [{
+        'border-y': [borderWidth]
+      }],
+
+      /**
        * Border Width Top
@@ -1610,3 +1617,3 @@ * @see https://tailwindcss.com/docs/border-width
       'border-style': [{
-        border: getBorderStyles()
+        border: [...getLineStyles(), 'hidden']
       }],
@@ -1655,3 +1662,3 @@
       'divide-style': [{
-        divide: getBorderStyles()
+        divide: getLineStyles()
       }],
@@ -1668,2 +1675,18 @@
       /**
+       * Border Color X
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-x': [{
+        'border-x': [borderColor]
+      }],
+
+      /**
+       * Border Color Y
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-y': [{
+        'border-y': [borderColor]
+      }],
+
+      /**
        * Border Color Top
@@ -1760,6 +1783,14 @@ * @see https://tailwindcss.com/docs/border-color
       shadow: [{
-        shadow: ['', ...getSizesSimple(), 'inner', 'none']
+        shadow: ['', 'inner', 'none', isTshirtSize]
       }],
 
       /**
+       * Box Shadow Color
+       * @see https://tailwindcss.com/docs/box-shadow-color
+       */
+      'shadow-color': [{
+        shadow: [isAny]
+      }],
+
+      /**
        * Opacity
@@ -1818,3 +1849,3 @@ * @see https://tailwindcss.com/docs/opacity
       'drop-shadow': [{
-        'drop-shadow': ['', ...getSizesSimple(), 'none']
+        'drop-shadow': ['', 'none', isTshirtSize]
       }],
@@ -1965,3 +1996,3 @@
       transition: [{
-        transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform', isCustomValue]
+        transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform', isArbitraryValue]
       }],
@@ -1982,3 +2013,3 @@
       ease: [{
-        ease: ['linear', 'in', 'out', 'in-out', isCustomValue]
+        ease: ['linear', 'in', 'out', 'in-out', isArbitraryValue]
       }],
@@ -1999,3 +2030,3 @@
       animate: [{
-        animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue]
+        animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isArbitraryValue]
       }],
@@ -2086,2 +2117,10 @@ // Transforms
       /**
+       * Accent Color
+       * @see https://tailwindcss.com/docs/accent-color
+       */
+      accent: [{
+        accent: ['auto', colors]
+      }],
+
+      /**
        * Appearance
@@ -2097,14 +2136,38 @@ * @see https://tailwindcss.com/docs/appearance
       cursor: [{
-        cursor: ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'help', 'not-allowed', isCustomValue]
+        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', isArbitraryValue]
       }],
 
       /**
-       * Outline
-       * @see https://tailwindcss.com/docs/outline
+       * Outline Width
+       * @see https://tailwindcss.com/docs/outline-width
        */
-      outline: [{
-        outline: ['none', 'white', 'black']
+      'outline-w': [{
+        outline: [isLength]
       }],
 
       /**
+       * Outline Style
+       * @see https://tailwindcss.com/docs/outline-style
+       */
+      'outline-style': [{
+        outline: ['', ...getLineStyles(), 'hidden']
+      }],
+
+      /**
+       * Outline Offset
+       * @see https://tailwindcss.com/docs/outline-offset
+       */
+      'outline-offset': [{
+        'outline-offset': [isLength]
+      }],
+
+      /**
+       * Outline Color
+       * @see https://tailwindcss.com/docs/outline-color
+       */
+      'outline-color': [{
+        outline: [colors]
+      }],
+
+      /**
        * Pointer Events
@@ -2126,8 +2189,170 @@ * @see https://tailwindcss.com/docs/pointer-events
       /**
-       * Select
-       * @see https://tailwindcss.com/docs/select
+       * Scroll Margin
+       * @see https://tailwindcss.com/docs/scroll-margin
        */
+      'scroll-m': [{
+        'scroll-m': [spacing]
+      }],
+
+      /**
+       * Scroll Margin X
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mx': [{
+        'scroll-mx': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Y
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-my': [{
+        'scroll-my': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Top
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mt': [{
+        'scroll-mt': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Right
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mr': [{
+        'scroll-mr': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Bottom
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mb': [{
+        'scroll-mb': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Left
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-ml': [{
+        'scroll-ml': [spacing]
+      }],
+
+      /**
+       * Scroll Padding
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-p': [{
+        'scroll-p': [spacing]
+      }],
+
+      /**
+       * Scroll Padding X
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-px': [{
+        'scroll-px': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Y
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-py': [{
+        'scroll-py': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Top
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pt': [{
+        'scroll-pt': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Right
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pr': [{
+        'scroll-pr': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Bottom
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pb': [{
+        'scroll-pb': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Left
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pl': [{
+        'scroll-pl': [spacing]
+      }],
+
+      /**
+       * 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', 'pinch-zoom', 'manipulation', {
+          pan: ['x', 'left', 'right', 'y', 'up', 'down']
+        }]
+      }],
+
+      /**
+       * 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', isArbitraryValue]
+      }],
       // SVG
@@ -2140,3 +2365,3 @@
       fill: [{
-        fill: ['current', isCustomValue]
+        fill: [colors]
       }],
@@ -2149,3 +2374,3 @@
       stroke: [{
-        stroke: ['current', isCustomValue]
+        stroke: [colors]
       }],
@@ -2174,3 +2399,3 @@
       content: [{
-        content: [isCustomValue]
+        content: [isArbitraryValue]
       }],
@@ -2192,3 +2417,3 @@
       'inset-y': ['top', 'bottom'],
-      flex: ['flex-grow', 'flex-shrink'],
+      flex: ['basis', 'grow', 'shrink'],
       'col-start-end': ['col-start', 'col-end'],
@@ -2216,3 +2441,13 @@ 'row-start-end': ['row-start', 'row-end'],
       'border-w': ['border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
-      'border-color': ['border-color-t', 'border-color-r', 'border-color-b', 'border-color-l']
+      'border-w-x': ['border-w-r', 'border-w-l'],
+      'border-w-y': ['border-w-t', 'border-w-b'],
+      'border-color': ['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'],
+      'scroll-m': ['scroll-mx', 'scroll-my', '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-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
+      'scroll-px': ['scroll-pr', 'scroll-pl'],
+      'scroll-py': ['scroll-pt', 'scroll-pb']
     }
@@ -2219,0 +2454,0 @@ };

dist/index.module.js

@@ -45,3 +45,3 @@ import HLRU from 'hashlru';
 
-    return getGroupRecursive(classParts, classMap);
+    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
   }
@@ -84,2 +84,16 @@
 }
+
+var arbitraryPropertyRegex = /^\[(.+)\]$/;
+
+function getGroupIdForArbitraryProperty(className) {
+  if (arbitraryPropertyRegex.test(className)) {
+    var arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
+    var property = arbitraryPropertyClassName == null ? void 0 : 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;
+    }
+  }
+}
 /**
@@ -159,3 +173,3 @@ * Exported for testing only
 var SPLIT_CLASSES_REGEX = /\s+/;
-var IMPORTANT_MODIFIER = '!'; // Regex is needed so we don't match against colons in labels for custom values like `text-[color:var(--mystery-var)]`
+var IMPORTANT_MODIFIER = '!'; // Regex is needed so we don't match against colons in labels for arbitrary values like `text-[color:var(--mystery-var)]`
 // I'd prefer to use a negative lookbehind for all supported labels, but lookbheinds don't have good browser support yet. More info: https://caniuse.com/js-regexp-lookbehind
@@ -281,16 +295,17 @@
 
-var customValueRegex = /^\[(.+)\]$/;
+var arbitraryValueRegex = /^\[(.+)\]$/;
 var fractionRegex = /^\d+\/\d+$/;
 var stringLengths = new Set(['px', 'full', 'screen']);
+var tshirtUnitRegex = /^(\d+)?(xs|sm|md|lg|xl)$/;
 var lengthUnitRegex = /\d+(%|px|em|rem|vh|vw|pt|pc|in|cm|mm|cap|ch|ex|lh|rlh|vi|vb|vmin|vmax)/;
 function isLength(classPart) {
-  return isCustomLength(classPart) || !Number.isNaN(Number(classPart)) || stringLengths.has(classPart) || fractionRegex.test(classPart);
+  return !Number.isNaN(Number(classPart)) || stringLengths.has(classPart) || fractionRegex.test(classPart) || isArbitraryLength(classPart);
 }
-function isCustomLength(classPart) {
-  var _customValueRegex$exe;
+function isArbitraryLength(classPart) {
+  var _arbitraryValueRegex$;
 
-  var customValue = (_customValueRegex$exe = customValueRegex.exec(classPart)) == null ? void 0 : _customValueRegex$exe[1];
+  var arbitraryValue = (_arbitraryValueRegex$ = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$[1];
 
-  if (customValue) {
-    return customValue.startsWith('length:') || lengthUnitRegex.test(customValue);
+  if (arbitraryValue) {
+    return arbitraryValue.startsWith('length:') || lengthUnitRegex.test(arbitraryValue);
   }
@@ -300,9 +315,33 @@
 }
+function isArbitrarySize(classPart) {
+  var _arbitraryValueRegex$2;
+
+  var arbitraryValue = (_arbitraryValueRegex$2 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$2[1];
+  return arbitraryValue ? arbitraryValue.startsWith('size:') : false;
+}
+function isArbitraryPosition(classPart) {
+  var _arbitraryValueRegex$3;
+
+  var arbitraryValue = (_arbitraryValueRegex$3 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$3[1];
+  return arbitraryValue ? arbitraryValue.startsWith('position:') : false;
+}
+function isArbitraryUrl(classPart) {
+  var _arbitraryValueRegex$4;
+
+  var arbitraryValue = (_arbitraryValueRegex$4 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$4[1];
+  return arbitraryValue ? arbitraryValue.startsWith('url(') || arbitraryValue.startsWith('url:') : false;
+}
+function isArbitraryWeight(classPart) {
+  var _arbitraryValueRegex$5;
+
+  var arbitraryValue = (_arbitraryValueRegex$5 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$5[1];
+  return arbitraryValue ? !Number.isNaN(Number(arbitraryValue)) || arbitraryValue.startsWith('weight:') : false;
+}
 function isInteger(classPart) {
-  var _customValueRegex$exe2;
+  var _arbitraryValueRegex$6;
 
-  var customValue = (_customValueRegex$exe2 = customValueRegex.exec(classPart)) == null ? void 0 : _customValueRegex$exe2[1];
+  var arbitraryValue = (_arbitraryValueRegex$6 = arbitraryValueRegex.exec(classPart)) == null ? void 0 : _arbitraryValueRegex$6[1];
 
-  if (customValue) {
-    return Number.isInteger(Number(customValue));
+  if (arbitraryValue) {
+    return Number.isInteger(Number(arbitraryValue));
   }
@@ -312,4 +351,4 @@
 }
-function isCustomValue(classPart) {
-  return customValueRegex.test(classPart);
+function isArbitraryValue(classPart) {
+  return arbitraryValueRegex.test(classPart);
 }
@@ -319,2 +358,5 @@ function isAny() {
 }
+function isTshirtSize(classPart) {
+  return tshirtUnitRegex.test(classPart);
+}
 
@@ -324,6 +366,11 @@ var validators = {
   isLength: isLength,
-  isCustomLength: isCustomLength,
+  isArbitraryLength: isArbitraryLength,
+  isArbitrarySize: isArbitrarySize,
+  isArbitraryPosition: isArbitraryPosition,
+  isArbitraryUrl: isArbitraryUrl,
+  isArbitraryWeight: isArbitraryWeight,
   isInteger: isInteger,
-  isCustomValue: isCustomValue,
-  isAny: isAny
+  isArbitraryValue: isArbitraryValue,
+  isAny: isAny,
+  isTshirtSize: isTshirtSize
 };
@@ -356,10 +403,2 @@
 
-  var getSizesSimple = function getSizesSimple() {
-    return ['sm', 'md', 'lg', 'xl', '2xl'];
-  };
-
-  var getSizesExtended = function getSizesExtended() {
-    return ['3xl', '4xl', '5xl', '6xl', '7xl'];
-  };
-
   var getOverscroll = function getOverscroll() {
@@ -370,3 +409,3 @@ return ['auto', 'contain', 'none'];
   var getOverflow = function getOverflow() {
-    return ['auto', 'hidden', 'visible', 'scroll'];
+    return ['auto', 'hidden', 'clip', 'visible', 'scroll'];
   };
@@ -390,3 +429,3 @@
 
-  var getBorderStyles = function getBorderStyles() {
+  var getLineStyles = function getLineStyles() {
     return ['solid', 'dashed', 'dotted', 'double', 'none'];
@@ -409,2 +448,6 @@ };
 
+  var getBreaks = function getBreaks() {
+    return ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
+  };
+
   return {
@@ -415,6 +458,6 @@ cacheSize: 500,
       spacing: [isLength],
-      blur: ['none', ''].concat(getSizesSimple(), ['3xl', isCustomLength]),
+      blur: ['none', '', isTshirtSize, isArbitraryLength],
       brightness: [isInteger],
       borderColor: [colors],
-      borderRadius: ['none', ''].concat(getSizesSimple(), ['3xl', 'full', isCustomLength]),
+      borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryLength],
       borderWidth: getLengthWithEmpty(),
@@ -436,145 +479,3 @@ contrast: [isInteger],
       space: [spacing],
-      translate: [spacing] // Tailwind theme keys not in use because they would apply only to a single classGroup:
-      // animation: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue],
-      // backdropBlur: [blur],
-      // backdropBrightness: [brightness],
-      // backdropContrast: [contrast],
-      // backdropGrayscale: [grayscale],
-      // backdropHueRotate: [hueRotate],
-      // backdropInvert: [invert],
-      // backdropOpacity: [opacity],
-      // backdropSaturate: [saturate],
-      // backdropSepia: [sepia],
-      // backgroundColor: [colors],
-      // backgroundImage: [
-      //     'none',
-      //     { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] },
-      // ],
-      // backgroundOpacity: [opacity],
-      // backgroundPosition: getPositions(),
-      // backgroundSize: ['auto', 'cover', 'contain'],
-      // borderOpacity: [opacity],
-      // boxShadow: ['', ...getSizesSimple(), 'inner', 'none'],
-      // caretColor: [colors],
-      // container: ['container'],
-      // content: [isCustomValue],
-      // cursor: [
-      //     'auto',
-      //     'default',
-      //     'pointer',
-      //     'wait',
-      //     'text',
-      //     'move',
-      //     'help',
-      //     'not-allowed',
-      //     isCustomValue,
-      // ],
-      // divideColor: [borderColor],
-      // divideOpacity: [borderOpacity],
-      // divideWidth: [borderWidth],
-      // dropShadow: ['', ...getSizesSimple(), 'none'],
-      // fill: ['current', isCustomValue],
-      // flex: ['1', 'auto', 'initial', 'none', isCustomValue],
-      // flexGrow: getZeroAndEmpty(),
-      // flexShrink: getZeroAndEmpty(),
-      // fontFamily: [isAny],
-      // fontSize: [
-      //     'xs',
-      //     ...getSizesSimple(),
-      //     'base',
-      //     ...getSizesExtended(),
-      //     '8xl',
-      //     '9xl',
-      //     isCustomLength,
-      // ],
-      // fontWeight: [
-      //     'thin',
-      //     'extralight',
-      //     'light',
-      //     'normal',
-      //     'medium',
-      //     'semibold',
-      //     'bold',
-      //     'extrabold',
-      //     'black',
-      // ],
-      // gridAutoColumns: ['auto', 'min', 'max', 'fr', isCustomValue],
-      // gridAutoRows: ['auto', 'min', 'max', 'fr', isCustomValue],
-      // gridColumn: ['auto', { span: [isInteger] }],
-      // gridColumnEnd: getIntegerWithAuto(),
-      // gridColumnStart: getIntegerWithAuto(),
-      // gridRow: ['auto', { span: [isInteger] }],
-      // gridRowStart: getIntegerWithAuto(),
-      // gridRowEnd: getIntegerWithAuto(),
-      // gridTemplateColumns: [isAny],
-      // gridTemplateRows: [isAny],
-      // height: getSpacingWithAuto(),
-      // letterSpacing: [
-      //     'tighter',
-      //     'tight',
-      //     'normal',
-      //     'wide',
-      //     'wider',
-      //     'widest',
-      //     isCustomLength,
-      // ],
-      // lineHeight: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength],
-      // listStyleType: ['none', 'disc', 'decimal', isCustomValue],
-      // maxHeight: [spacing],
-      // maxWidth: [
-      //     '0',
-      //     'none',
-      //     ...getSizesSimple(),
-      //     ...getSizesExtended(),
-      //     'full',
-      //     'min',
-      //     'max',
-      //     'prose',
-      //     { screen: getSizesSimple() },
-      //     isCustomLength,
-      // ],
-      // minHeight: ['full', 'screen', isLength],
-      // minWidth: ['full', 'min', 'max', isLength],
-      // objectPosition: getPositions(),
-      // order: ['first', 'last', 'none', isInteger],
-      // outline: ['none', 'white', 'black'],
-      // placeholderColor: [colors],
-      // placeholderOpacity: [opacity],
-      // ringColor: [colors],
-      // ringOffsetColor: [colors],
-      // ringOffsetWidth: [isLength],
-      // ringOpacity: [opacity],
-      // ringWidth: getLengthWithEmpty(),
-      // rotate: [isInteger],
-      // stroke: ['current', isCustomValue],
-      // strokeWidth: [isLength],
-      // textColor: [colors],
-      // textOpacity: [opacity],
-      // transformOrigin: [
-      //     'center',
-      //     'top',
-      //     'top-right',
-      //     'right',
-      //     'bottom-right',
-      //     'bottom',
-      //     'bottom-left',
-      //     'left',
-      //     'top-left',
-      // ],
-      // transitionDelay: [isInteger],
-      // transitionDuration: [isInteger],
-      // transitionProperty: [
-      //     'none',
-      //     'all',
-      //     '',
-      //     'colors',
-      //     'opacity',
-      //     'shadow',
-      //     'transform',
-      //     isCustomValue,
-      // ],
-      // transitionTimingFunction: ['linear', 'in', 'out', 'in-out', isCustomValue],
-      // width: ['auto', 'min', 'max', spacing],
-      // zIndex: [isLength],
-
+      translate: [spacing]
     },
@@ -585,2 +486,10 @@ classGroups: {
       /**
+       * Aspect Ratio
+       * @see https://tailwindcss.com/docs/aspect-ratio
+       */
+      aspect: [{
+        aspect: ['auto', 'square', 'video', isArbitraryValue]
+      }],
+
+      /**
        * Container
@@ -592,7 +501,39 @@ * @see https://tailwindcss.com/docs/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-before': ['auto', 'avoid', 'avoid-page', 'avoid-column']
+      }],
+
+      /**
        * Box Decoration Break
        * @see https://tailwindcss.com/docs/box-decoration-break
        */
-      decoration: [{
-        decoration: ['slice', 'clone']
+      'box-decoration': [{
+        'box-decoration': ['slice', 'clone']
       }],
@@ -778,2 +719,10 @@
       /**
+       * Flex Basis
+       * @see https://tailwindcss.com/docs/flex-basis
+       */
+      basis: [{
+        basis: [spacing]
+      }],
+
+      /**
        * Flex Direction
@@ -799,3 +748,3 @@ * @see https://tailwindcss.com/docs/flex-direction
       flex: [{
-        flex: ['1', 'auto', 'initial', 'none', isCustomValue]
+        flex: ['1', 'auto', 'initial', 'none', isArbitraryValue]
       }],
@@ -807,4 +756,4 @@
        */
-      'flex-grow': [{
-        'flex-grow': getZeroAndEmpty()
+      grow: [{
+        grow: getZeroAndEmpty()
       }],
@@ -816,4 +765,4 @@
        */
-      'flex-shrink': [{
-        'flex-shrink': getZeroAndEmpty()
+      shrink: [{
+        shrink: getZeroAndEmpty()
       }],
@@ -910,3 +859,3 @@
       'auto-cols': [{
-        'auto-cols': ['auto', 'min', 'max', 'fr', isCustomValue]
+        'auto-cols': ['auto', 'min', 'max', 'fr', isArbitraryValue]
       }],
@@ -919,3 +868,3 @@
       'auto-rows': [{
-        'auto-rows': ['auto', 'min', 'max', 'fr', isCustomValue]
+        'auto-rows': ['auto', 'min', 'max', 'fr', isArbitraryValue]
       }],
@@ -1174,3 +1123,3 @@
       'min-w': [{
-        'min-w': ['full', 'min', 'max', isLength]
+        'min-w': ['min', 'max', 'fit', isLength]
       }],
@@ -1183,5 +1132,5 @@
       'max-w': [{
-        'max-w': ['0', 'none'].concat(getSizesSimple(), getSizesExtended(), ['full', 'min', 'max', 'prose', {
-          screen: getSizesSimple()
-        }, isCustomLength])
+        'max-w': ['0', 'none', 'full', 'min', 'max', 'fit', 'prose', {
+          screen: [isTshirtSize]
+        }, isTshirtSize, isArbitraryLength]
       }],
@@ -1202,3 +1151,3 @@
       'min-h': [{
-        'min-h': ['full', 'screen', isLength]
+        'min-h': ['min', 'max', 'fit', isLength]
       }],
@@ -1211,3 +1160,3 @@
       'max-h': [{
-        'max-h': [spacing]
+        'max-h': [spacing, 'min', 'max', 'fit']
       }],
@@ -1217,10 +1166,2 @@ // Typography
       /**
-       * Font Family
-       * @see https://tailwindcss.com/docs/font-family
-       */
-      'font-family': [{
-        font: [isAny]
-      }],
-
-      /**
        * Font Size
@@ -1230,3 +1171,3 @@ * @see https://tailwindcss.com/docs/font-size
       'font-size': [{
-        text: ['xs'].concat(getSizesSimple(), ['base'], getSizesExtended(), ['8xl', '9xl', isCustomLength])
+        text: ['base', isTshirtSize, isArbitraryLength]
       }],
@@ -1251,6 +1192,14 @@
       'font-weight': [{
-        font: ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black']
+        font: ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black', isArbitraryWeight]
       }],
 
       /**
+       * Font Family
+       * @see https://tailwindcss.com/docs/font-family
+       */
+      'font-family': [{
+        font: [isAny]
+      }],
+
+      /**
        * Font Variant Numeric
@@ -1296,3 +1245,3 @@ * @see https://tailwindcss.com/docs/font-variant-numeric
       tracking: [{
-        tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest', isCustomLength]
+        tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest', isArbitraryLength]
       }],
@@ -1313,3 +1262,3 @@
       'list-style-type': [{
-        list: ['none', 'disc', 'decimal', isCustomValue]
+        list: ['none', 'disc', 'decimal', isArbitraryValue]
       }],
@@ -1372,2 +1321,26 @@
       /**
+       * 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 Decoration Color
+       * @see https://tailwindcss.com/docs/text-decoration-color
+       */
+      'text-decoration-color': [{
+        decoration: [colors]
+      }],
+
+      /**
        * Text Transform
@@ -1379,13 +1352,29 @@ * @see https://tailwindcss.com/docs/text-transform
       /**
+       * Scroll Behavior
+       * @see https://github.com/tailwindlabs/tailwindcss.com/issues/1016
+       */
+      'scroll-behavior': [{
+        scroll: ['smooth', 'auto']
+      }],
+
+      /**
        * Text Overflow
        * @see https://tailwindcss.com/docs/text-overflow
        */
-      'text-overflow': ['truncate', 'overflow-ellipsis', 'overflow-clip'],
+      'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'],
 
       /**
+       * Text Indent
+       * @see https://tailwindcss.com/docs/text-indent
+       */
+      indent: [{
+        indent: [spacing]
+      }],
+
+      /**
        * Vertical Alignment
        * @see https://tailwindcss.com/docs/vertical-align
        */
-      'vertival-alignment': [{
-        align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom']
+      'vertical-align': [{
+        align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', isArbitraryLength]
       }],
@@ -1447,3 +1436,3 @@
       'bg-position': [{
-        bg: getPositions()
+        bg: [].concat(getPositions(), [isArbitraryPosition])
       }],
@@ -1466,3 +1455,3 @@
       'bg-size': [{
-        bg: ['auto', 'cover', 'contain']
+        bg: ['auto', 'cover', 'contain', isArbitrarySize]
       }],
@@ -1477,3 +1466,3 @@
           'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
-        }]
+        }, isArbitraryUrl]
       }],
@@ -1603,2 +1592,18 @@
       /**
+       * Border Width X
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-x': [{
+        'border-x': [borderWidth]
+      }],
+
+      /**
+       * Border Width Y
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-y': [{
+        'border-y': [borderWidth]
+      }],
+
+      /**
        * Border Width Top
@@ -1648,3 +1653,3 @@ * @see https://tailwindcss.com/docs/border-width
       'border-style': [{
-        border: getBorderStyles()
+        border: [].concat(getLineStyles(), ['hidden'])
       }],
@@ -1693,3 +1698,3 @@
       'divide-style': [{
-        divide: getBorderStyles()
+        divide: getLineStyles()
       }],
@@ -1706,2 +1711,18 @@
       /**
+       * Border Color X
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-x': [{
+        'border-x': [borderColor]
+      }],
+
+      /**
+       * Border Color Y
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-y': [{
+        'border-y': [borderColor]
+      }],
+
+      /**
        * Border Color Top
@@ -1798,6 +1819,14 @@ * @see https://tailwindcss.com/docs/border-color
       shadow: [{
-        shadow: [''].concat(getSizesSimple(), ['inner', 'none'])
+        shadow: ['', 'inner', 'none', isTshirtSize]
       }],
 
       /**
+       * Box Shadow Color
+       * @see https://tailwindcss.com/docs/box-shadow-color
+       */
+      'shadow-color': [{
+        shadow: [isAny]
+      }],
+
+      /**
        * Opacity
@@ -1856,3 +1885,3 @@ * @see https://tailwindcss.com/docs/opacity
       'drop-shadow': [{
-        'drop-shadow': [''].concat(getSizesSimple(), ['none'])
+        'drop-shadow': ['', 'none', isTshirtSize]
       }],
@@ -2003,3 +2032,3 @@
       transition: [{
-        transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform', isCustomValue]
+        transition: ['none', 'all', '', 'colors', 'opacity', 'shadow', 'transform', isArbitraryValue]
       }],
@@ -2020,3 +2049,3 @@
       ease: [{
-        ease: ['linear', 'in', 'out', 'in-out', isCustomValue]
+        ease: ['linear', 'in', 'out', 'in-out', isArbitraryValue]
       }],
@@ -2037,3 +2066,3 @@
       animate: [{
-        animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue]
+        animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isArbitraryValue]
       }],
@@ -2124,2 +2153,10 @@ // Transforms
       /**
+       * Accent Color
+       * @see https://tailwindcss.com/docs/accent-color
+       */
+      accent: [{
+        accent: ['auto', colors]
+      }],
+
+      /**
        * Appearance
@@ -2135,14 +2172,38 @@ * @see https://tailwindcss.com/docs/appearance
       cursor: [{
-        cursor: ['auto', 'default', 'pointer', 'wait', 'text', 'move', 'help', 'not-allowed', isCustomValue]
+        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', isArbitraryValue]
       }],
 
       /**
-       * Outline
-       * @see https://tailwindcss.com/docs/outline
+       * Outline Width
+       * @see https://tailwindcss.com/docs/outline-width
        */
-      outline: [{
-        outline: ['none', 'white', 'black']
+      'outline-w': [{
+        outline: [isLength]
       }],
 
       /**
+       * Outline Style
+       * @see https://tailwindcss.com/docs/outline-style
+       */
+      'outline-style': [{
+        outline: [''].concat(getLineStyles(), ['hidden'])
+      }],
+
+      /**
+       * Outline Offset
+       * @see https://tailwindcss.com/docs/outline-offset
+       */
+      'outline-offset': [{
+        'outline-offset': [isLength]
+      }],
+
+      /**
+       * Outline Color
+       * @see https://tailwindcss.com/docs/outline-color
+       */
+      'outline-color': [{
+        outline: [colors]
+      }],
+
+      /**
        * Pointer Events
@@ -2164,8 +2225,170 @@ * @see https://tailwindcss.com/docs/pointer-events
       /**
-       * Select
-       * @see https://tailwindcss.com/docs/select
+       * Scroll Margin
+       * @see https://tailwindcss.com/docs/scroll-margin
        */
+      'scroll-m': [{
+        'scroll-m': [spacing]
+      }],
+
+      /**
+       * Scroll Margin X
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mx': [{
+        'scroll-mx': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Y
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-my': [{
+        'scroll-my': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Top
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mt': [{
+        'scroll-mt': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Right
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mr': [{
+        'scroll-mr': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Bottom
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mb': [{
+        'scroll-mb': [spacing]
+      }],
+
+      /**
+       * Scroll Margin Left
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-ml': [{
+        'scroll-ml': [spacing]
+      }],
+
+      /**
+       * Scroll Padding
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-p': [{
+        'scroll-p': [spacing]
+      }],
+
+      /**
+       * Scroll Padding X
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-px': [{
+        'scroll-px': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Y
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-py': [{
+        'scroll-py': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Top
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pt': [{
+        'scroll-pt': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Right
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pr': [{
+        'scroll-pr': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Bottom
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pb': [{
+        'scroll-pb': [spacing]
+      }],
+
+      /**
+       * Scroll Padding Left
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pl': [{
+        'scroll-pl': [spacing]
+      }],
+
+      /**
+       * 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', 'pinch-zoom', 'manipulation', {
+          pan: ['x', 'left', 'right', 'y', 'up', 'down']
+        }]
+      }],
+
+      /**
+       * 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', isArbitraryValue]
+      }],
       // SVG
@@ -2178,3 +2401,3 @@
       fill: [{
-        fill: ['current', isCustomValue]
+        fill: [colors]
       }],
@@ -2187,3 +2410,3 @@
       stroke: [{
-        stroke: ['current', isCustomValue]
+        stroke: [colors]
       }],
@@ -2212,3 +2435,3 @@
       content: [{
-        content: [isCustomValue]
+        content: [isArbitraryValue]
       }],
@@ -2230,3 +2453,3 @@
       'inset-y': ['top', 'bottom'],
-      flex: ['flex-grow', 'flex-shrink'],
+      flex: ['basis', 'grow', 'shrink'],
       'col-start-end': ['col-start', 'col-end'],
@@ -2254,3 +2477,13 @@ 'row-start-end': ['row-start', 'row-end'],
       'border-w': ['border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
-      'border-color': ['border-color-t', 'border-color-r', 'border-color-b', 'border-color-l']
+      'border-w-x': ['border-w-r', 'border-w-l'],
+      'border-w-y': ['border-w-t', 'border-w-b'],
+      'border-color': ['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'],
+      'scroll-m': ['scroll-mx', 'scroll-my', '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-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
+      'scroll-px': ['scroll-pr', 'scroll-pl'],
+      'scroll-py': ['scroll-pt', 'scroll-pb']
     }
@@ -2257,0 +2490,0 @@ };

dist/types/validators.d.ts

 export declare function isLength(classPart: string): boolean;
-export declare function isCustomLength(classPart: string): boolean;
+export declare function isArbitraryLength(classPart: string): boolean;
+export declare function isArbitrarySize(classPart: string): boolean;
+export declare function isArbitraryPosition(classPart: string): boolean;
+export declare function isArbitraryUrl(classPart: string): boolean;
+export declare function isArbitraryWeight(classPart: string): boolean;
 export declare function isInteger(classPart: string): boolean;
-export declare function isCustomValue(classPart: string): boolean;
+export declare function isArbitraryValue(classPart: string): boolean;
 export declare function isAny(): boolean;
+export declare function isTshirtSize(classPart: string): boolean;

package.json

 {
     "name": "tailwind-merge",
-    "version": "0.9.0",
+    "version": "1.0.0",
     "description": "Merge Tailwind CSS classes without style conflicts",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 <div align="center">
     <br />
     <a href="https://github.com/dcastil/tailwind-merge">
-        <!-- AUTOGENERATED START logo-image --><img src="https://github.com/dcastil/tailwind-merge/raw/v0.9.0/assets/logo.svg" alt="tailwind-merge" width="221px" /><!-- AUTOGENERATED END -->
+        <!-- AUTOGENERATED START logo-image --><img src="https://github.com/dcastil/tailwind-merge/raw/v1.0.0/assets/logo.svg" alt="tailwind-merge" width="221px" /><!-- AUTOGENERATED END -->
     </a>
@@ -19,13 +19,7 @@ </div>
 
--   Supports Tailwind v2.0 up to v2.2, support for newer versions will be added continuously
+-   Supports Tailwind v3.0 (if you use Tailwind v2, use [tailwind-merge v0.9.0](https://github.com/dcastil/tailwind-merge/tree/v0.9.0))
 -   Works in Node >=12 and all modern browsers
 -   Fully typed
--   [<!-- AUTOGENERATED START package-gzip-size -->5.2 kB<!-- AUTOGENERATED END --> minified + gzipped](https://bundlephobia.com/package/tailwind-merge) (<!-- AUTOGENERATED START package-composition -->96.7% self, 3.3% hashlru<!-- AUTOGENERATED END -->)
+-   [<!-- AUTOGENERATED START package-gzip-size -->5.9 kB<!-- AUTOGENERATED END --> minified + gzipped](https://bundlephobia.com/package/tailwind-merge) (<!-- AUTOGENERATED START package-composition -->97.2% self, 2.8% hashlru<!-- AUTOGENERATED END -->)
 
-## Early development
-
-This library is in an early pre-v1 development stage and might have some bugs and inconveniences here and there. I use the library in production and intend it to be sufficient for production use, as long as you're fine with some potential breaking changes in minor releases until v1 (lock the version range to patch releases with `~` in your `package.json` to prevent accidental breaking changes).
-
-I want to keep the library on v0 until I feel confident enough that there aren't any major bugs or flaws in its API and implementation. If you find a bug or something you don't like, please [submit an issue](https://github.com/dcastil/tailwind-merge/issues/new/choose) or a pull request. I'm happy about any kind of feedback!
-
 ## What is it for
@@ -104,3 +98,3 @@
 
-### Supports custom values
+### Supports arbitrary values
 
@@ -112,2 +106,15 @@ ```ts
 
+### Supports arbitrary properties
+
+```ts
+twMerge('[mask-type:luminance] [mask-type:alpha]') // → '[mask-type:alpha]'
+twMerge('[--scroll-offset:56px] lg:[--scroll-offset:44px]')
+// → '[--scroll-offset:56px] lg:[--scroll-offset:44px]'
+
+// Don't do this!
+twMerge('[padding:1rem] p-8') // → '[padding:1rem] p-8'
+```
+
+Watch out for mixing arbitrary properties which could be expressed as Tailwind classes. tailwind-merge does not resolve conflicts between arbitrary properties and their matching Tailwind classes to keep the bundle size small.
+
 ### Supports important modifier
@@ -199,3 +206,3 @@
 
-Sometimes it isn't possible to enumerate all elements in a class group. Think of a Tailwind class which allows custom values. In this scenario you can use a validator function which takes a _class part_ and returns a boolean indicating whether a class is part of a class group.
+Sometimes it isn't possible to enumerate all elements in a class group. Think of a Tailwind class which allows arbitrary values. In this scenario you can use a validator function which takes a _class part_ and returns a boolean indicating whether a class is part of a class group.
 
@@ -205,4 +212,4 @@ E.g. here is the fill class group.
 ```ts
-const isCustomValue = (classPart: string) => /^\[.+\]$/.test(classPart)
-const fillClassGroup = [{ fill: ['current', isCustomValue] }]
+const isArbitraryValue = (classPart: string) => /^\[.+\]$/.test(classPart)
+const fillClassGroup = [{ fill: ['current', isArbitraryValue] }]
 ```
@@ -514,5 +521,10 @@
     isLength(classPart: string): boolean
-    isCustomLength(classPart: string): boolean
+    isArbitraryLength(classPart: string): boolean
     isInteger(classPart: string): boolean
-    isCustomValue(classPart: string): boolean
+    isArbitraryValue(classPart: string): boolean
+    isTshirtSize(classPart: string): boolean
+    isArbitrarySize(classPart: string): boolean
+    isArbitraryPosition(classPart: string): boolean
+    isArbitraryUrl(classPart: string): boolean
+    isArbitraryWeight(classPart: string): boolean
     isAny(classPart: string): boolean
@@ -530,6 +542,11 @@ }
 
--   `isLength` checks whether a class part is a number (`3`, `1.5`), a fraction (`3/4`), a custom length (`[3%]`, `[4px]`, `[length:var(--my-var)]`), or one of the strings `px`, `full` or `screen`.
--   `isCustomLength` checks for custom length values (`[3%]`, `[4px]`, `[length:var(--my-var)]`).
--   `isInteger` checks for integer values (`3`) and custom integer values (`[3]`).
--   `isCustomValue` checks whether the class part is enclosed in brackets (`[something]`)
+-   `isLength` checks whether a class part is a number (`3`, `1.5`), a fraction (`3/4`), a arbitrary length (`[3%]`, `[4px]`, `[length:var(--my-var)]`), or one of the strings `px`, `full` or `screen`.
+-   `isArbitraryLength` checks for arbitrary length values (`[3%]`, `[4px]`, `[length:var(--my-var)]`).
+-   `isInteger` checks for integer values (`3`) and arbitrary integer values (`[3]`).
+-   `isArbitraryValue` checks whether the class part is enclosed in brackets (`[something]`)
+-   `isTshirtSize`checks whether class part is a T-shirt size (`sm`, `xl`), optionally with a preceding number (`2xl`).
+-   `isArbitrarySize` checks whether class part is arbitrary value which starts with with `size:` (`[size:200px_100px]`) which is necessary for background-size classNames.
+-   `isArbitraryPosition` checks whether class part is arbitrary value which starts with with `position:` (`[position:200px_100px]`) which is necessary for background-position classNames.
+-   `isArbitraryUrl` checks whether class part is arbitrary value which starts with `url:` or `url(` (`[url('/path-to-image.png')]`, `url:var(--maybe-a-url-at-runtime)]`) which is necessary for background-image classNames.
+-   `isArbitraryWeight` checks whether class part is arbitrary value whcih starts with `weight:` or is a number (`[weight:var(--value)]`, `[450]`) which is necessary for font-weight classNames.
 -   `isAny` always returns true. Be careful with this validator as it might match unwanted classes. I use it primarily to match colors or when I'm ceertain there are no other class groups in a namespace.
@@ -536,0 +553,0 @@

src/class-utils.ts

@@ -27,3 +27,3 @@ import { ClassGroupId, Config, ClassGroup, ClassValidator, ThemeObject, ThemeGetter } from './types'
 
-        return getGroupRecursive(classParts, classMap)
+        return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className)
     }
@@ -68,2 +68,19 @@
 
+const arbitraryPropertyRegex = /^\[(.+)\]$/
+
+function getGroupIdForArbitraryProperty(className: string) {
+    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
+        }
+    }
+}
+
 /**
@@ -70,0 +87,0 @@ * Exported for testing only

src/default-config.ts

 import { fromTheme } from './from-theme'
-import { isAny, isCustomLength, isCustomValue, isInteger, isLength } from './validators'
+import {
+    isAny,
+    isArbitraryLength,
+    isArbitraryPosition,
+    isArbitrarySize,
+    isArbitraryUrl,
+    isArbitraryValue,
+    isArbitraryWeight,
+    isInteger,
+    isLength,
+    isTshirtSize,
+} from './validators'
 
@@ -29,6 +40,4 @@ export function getDefaultConfig() {
 
-    const getSizesSimple = () => ['sm', 'md', 'lg', 'xl', '2xl'] as const
-    const getSizesExtended = () => ['3xl', '4xl', '5xl', '6xl', '7xl'] as const
     const getOverscroll = () => ['auto', 'contain', 'none'] as const
-    const getOverflow = () => ['auto', 'hidden', 'visible', 'scroll'] as const
+    const getOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'] as const
     const getSpacingWithAuto = () => ['auto', spacing] as const
@@ -49,3 +58,3 @@ const getLengthWithEmpty = () => ['', isLength] as const
         ] as const
-    const getBorderStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'] as const
+    const getLineStyles = () => ['solid', 'dashed', 'dotted', 'double', 'none'] as const
     const getBlendModes = () =>
@@ -76,2 +85,4 @@ [
     const getZeroAndEmpty = () => ['', '0'] as const
+    const getBreaks = () =>
+        ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'] as const
 
@@ -83,6 +94,6 @@ return {
             spacing: [isLength],
-            blur: ['none', '', ...getSizesSimple(), '3xl', isCustomLength],
+            blur: ['none', '', isTshirtSize, isArbitraryLength],
             brightness: [isInteger],
             borderColor: [colors],
-            borderRadius: ['none', '', ...getSizesSimple(), '3xl', 'full', isCustomLength],
+            borderRadius: ['none', '', 'full', isTshirtSize, isArbitraryLength],
             borderWidth: getLengthWithEmpty(),
@@ -105,146 +116,2 @@ contrast: [isInteger],
             translate: [spacing],
-
-            // Tailwind theme keys not in use because they would apply only to a single classGroup:
-
-            // animation: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue],
-            // backdropBlur: [blur],
-            // backdropBrightness: [brightness],
-            // backdropContrast: [contrast],
-            // backdropGrayscale: [grayscale],
-            // backdropHueRotate: [hueRotate],
-            // backdropInvert: [invert],
-            // backdropOpacity: [opacity],
-            // backdropSaturate: [saturate],
-            // backdropSepia: [sepia],
-            // backgroundColor: [colors],
-            // backgroundImage: [
-            //     'none',
-            //     { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] },
-            // ],
-            // backgroundOpacity: [opacity],
-            // backgroundPosition: getPositions(),
-            // backgroundSize: ['auto', 'cover', 'contain'],
-            // borderOpacity: [opacity],
-            // boxShadow: ['', ...getSizesSimple(), 'inner', 'none'],
-            // caretColor: [colors],
-            // container: ['container'],
-            // content: [isCustomValue],
-            // cursor: [
-            //     'auto',
-            //     'default',
-            //     'pointer',
-            //     'wait',
-            //     'text',
-            //     'move',
-            //     'help',
-            //     'not-allowed',
-            //     isCustomValue,
-            // ],
-            // divideColor: [borderColor],
-            // divideOpacity: [borderOpacity],
-            // divideWidth: [borderWidth],
-            // dropShadow: ['', ...getSizesSimple(), 'none'],
-            // fill: ['current', isCustomValue],
-            // flex: ['1', 'auto', 'initial', 'none', isCustomValue],
-            // flexGrow: getZeroAndEmpty(),
-            // flexShrink: getZeroAndEmpty(),
-            // fontFamily: [isAny],
-            // fontSize: [
-            //     'xs',
-            //     ...getSizesSimple(),
-            //     'base',
-            //     ...getSizesExtended(),
-            //     '8xl',
-            //     '9xl',
-            //     isCustomLength,
-            // ],
-            // fontWeight: [
-            //     'thin',
-            //     'extralight',
-            //     'light',
-            //     'normal',
-            //     'medium',
-            //     'semibold',
-            //     'bold',
-            //     'extrabold',
-            //     'black',
-            // ],
-            // gridAutoColumns: ['auto', 'min', 'max', 'fr', isCustomValue],
-            // gridAutoRows: ['auto', 'min', 'max', 'fr', isCustomValue],
-            // gridColumn: ['auto', { span: [isInteger] }],
-            // gridColumnEnd: getIntegerWithAuto(),
-            // gridColumnStart: getIntegerWithAuto(),
-            // gridRow: ['auto', { span: [isInteger] }],
-            // gridRowStart: getIntegerWithAuto(),
-            // gridRowEnd: getIntegerWithAuto(),
-            // gridTemplateColumns: [isAny],
-            // gridTemplateRows: [isAny],
-            // height: getSpacingWithAuto(),
-            // letterSpacing: [
-            //     'tighter',
-            //     'tight',
-            //     'normal',
-            //     'wide',
-            //     'wider',
-            //     'widest',
-            //     isCustomLength,
-            // ],
-            // lineHeight: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose', isLength],
-            // listStyleType: ['none', 'disc', 'decimal', isCustomValue],
-            // maxHeight: [spacing],
-            // maxWidth: [
-            //     '0',
-            //     'none',
-            //     ...getSizesSimple(),
-            //     ...getSizesExtended(),
-            //     'full',
-            //     'min',
-            //     'max',
-            //     'prose',
-            //     { screen: getSizesSimple() },
-            //     isCustomLength,
-            // ],
-            // minHeight: ['full', 'screen', isLength],
-            // minWidth: ['full', 'min', 'max', isLength],
-            // objectPosition: getPositions(),
-            // order: ['first', 'last', 'none', isInteger],
-            // outline: ['none', 'white', 'black'],
-            // placeholderColor: [colors],
-            // placeholderOpacity: [opacity],
-            // ringColor: [colors],
-            // ringOffsetColor: [colors],
-            // ringOffsetWidth: [isLength],
-            // ringOpacity: [opacity],
-            // ringWidth: getLengthWithEmpty(),
-            // rotate: [isInteger],
-            // stroke: ['current', isCustomValue],
-            // strokeWidth: [isLength],
-            // textColor: [colors],
-            // textOpacity: [opacity],
-            // transformOrigin: [
-            //     'center',
-            //     'top',
-            //     'top-right',
-            //     'right',
-            //     'bottom-right',
-            //     'bottom',
-            //     'bottom-left',
-            //     'left',
-            //     'top-left',
-            // ],
-            // transitionDelay: [isInteger],
-            // transitionDuration: [isInteger],
-            // transitionProperty: [
-            //     'none',
-            //     'all',
-            //     '',
-            //     'colors',
-            //     'opacity',
-            //     'shadow',
-            //     'transform',
-            //     isCustomValue,
-            // ],
-            // transitionTimingFunction: ['linear', 'in', 'out', 'in-out', isCustomValue],
-            // width: ['auto', 'min', 'max', spacing],
-            // zIndex: [isLength],
         },
@@ -254,2 +121,7 @@ classGroups: {
             /**
+             * Aspect Ratio
+             * @see https://tailwindcss.com/docs/aspect-ratio
+             */
+            aspect: [{ aspect: ['auto', 'square', 'video', isArbitraryValue] }],
+            /**
              * Container
@@ -260,6 +132,26 @@ * @see https://tailwindcss.com/docs/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-before': ['auto', 'avoid', 'avoid-page', 'avoid-column'] }],
+            /**
              * Box Decoration Break
              * @see https://tailwindcss.com/docs/box-decoration-break
              */
-            decoration: [{ decoration: ['slice', 'clone'] }],
+            'box-decoration': [{ 'box-decoration': ['slice', 'clone'] }],
             /**
@@ -404,2 +296,7 @@ * Box Sizing
             /**
+             * Flex Basis
+             * @see https://tailwindcss.com/docs/flex-basis
+             */
+            basis: [{ basis: [spacing] }],
+            /**
              * Flex Direction
@@ -418,3 +315,3 @@ * @see https://tailwindcss.com/docs/flex-direction
              */
-            flex: [{ flex: ['1', 'auto', 'initial', 'none', isCustomValue] }],
+            flex: [{ flex: ['1', 'auto', 'initial', 'none', isArbitraryValue] }],
             /**
@@ -424,3 +321,3 @@ * Flex Grow
              */
-            'flex-grow': [{ 'flex-grow': getZeroAndEmpty() }],
+            grow: [{ grow: getZeroAndEmpty() }],
             /**
@@ -430,3 +327,3 @@ * Flex Shrink
              */
-            'flex-shrink': [{ 'flex-shrink': getZeroAndEmpty() }],
+            shrink: [{ shrink: getZeroAndEmpty() }],
             /**
@@ -486,3 +383,3 @@ * Order
              */
-            'auto-cols': [{ 'auto-cols': ['auto', 'min', 'max', 'fr', isCustomValue] }],
+            'auto-cols': [{ 'auto-cols': ['auto', 'min', 'max', 'fr', isArbitraryValue] }],
             /**
@@ -492,3 +389,3 @@ * Grid Auto Rows
              */
-            'auto-rows': [{ 'auto-rows': ['auto', 'min', 'max', 'fr', isCustomValue] }],
+            'auto-rows': [{ 'auto-rows': ['auto', 'min', 'max', 'fr', isArbitraryValue] }],
             /**
@@ -655,3 +552,3 @@ * Gap
              */
-            'min-w': [{ 'min-w': ['full', 'min', 'max', isLength] }],
+            'min-w': [{ 'min-w': ['min', 'max', 'fit', isLength] }],
             /**
@@ -666,10 +563,10 @@ * Max-Width
                         'none',
-                        ...getSizesSimple(),
-                        ...getSizesExtended(),
                         'full',
                         'min',
                         'max',
+                        'fit',
                         'prose',
-                        { screen: getSizesSimple() },
-                        isCustomLength,
+                        { screen: [isTshirtSize] },
+                        isTshirtSize,
+                        isArbitraryLength,
                     ],
@@ -687,3 +584,3 @@ },
              */
-            'min-h': [{ 'min-h': ['full', 'screen', isLength] }],
+            'min-h': [{ 'min-h': ['min', 'max', 'fit', isLength] }],
             /**
@@ -693,26 +590,9 @@ * Max-Height
              */
-            'max-h': [{ 'max-h': [spacing] }],
+            'max-h': [{ 'max-h': [spacing, 'min', 'max', 'fit'] }],
             // Typography
             /**
-             * Font Family
-             * @see https://tailwindcss.com/docs/font-family
-             */
-            'font-family': [{ font: [isAny] }],
-            /**
              * Font Size
              * @see https://tailwindcss.com/docs/font-size
              */
-            'font-size': [
-                {
-                    text: [
-                        'xs',
-                        ...getSizesSimple(),
-                        'base',
-                        ...getSizesExtended(),
-                        '8xl',
-                        '9xl',
-                        isCustomLength,
-                    ],
-                },
-            ],
+            'font-size': [{ text: ['base', isTshirtSize, isArbitraryLength] }],
             /**
@@ -744,2 +624,3 @@ * Font Smoothing
                         'black',
+                        isArbitraryWeight,
                     ],
@@ -749,2 +630,7 @@ },
             /**
+             * Font Family
+             * @see https://tailwindcss.com/docs/font-family
+             */
+            'font-family': [{ font: [isAny] }],
+            /**
              * Font Variant Numeric
@@ -792,3 +678,3 @@ * @see https://tailwindcss.com/docs/font-variant-numeric
                         'widest',
-                        isCustomLength,
+                        isArbitraryLength,
                     ],
@@ -808,3 +694,3 @@ },
              */
-            'list-style-type': [{ list: ['none', 'disc', 'decimal', isCustomValue] }],
+            'list-style-type': [{ list: ['none', 'disc', 'decimal', isArbitraryValue] }],
             /**
@@ -846,2 +732,17 @@ * List Style Position
             /**
+             * Text Decoration Style
+             * @see https://tailwindcss.com/docs/text-decoration-style
+             */
+            'text-decoration-style': [{ decoration: [...getLineStyles(), 'wavy'] }],
+            /**
+             * Text Decoration Thickness
+             * @see https://tailwindcss.com/docs/text-decoration-thickness
+             */
+            'text-decoration-thickness': [{ decoration: ['auto', 'from-font', isLength] }],
+            /**
+             * Text Decoration Color
+             * @see https://tailwindcss.com/docs/text-decoration-color
+             */
+            'text-decoration-color': [{ decoration: [colors] }],
+            /**
              * Text Transform
@@ -852,12 +753,34 @@ * @see https://tailwindcss.com/docs/text-transform
             /**
+             * Scroll Behavior
+             * @see https://github.com/tailwindlabs/tailwindcss.com/issues/1016
+             */
+            'scroll-behavior': [{ scroll: ['smooth', 'auto'] }],
+            /**
              * Text Overflow
              * @see https://tailwindcss.com/docs/text-overflow
              */
-            'text-overflow': ['truncate', 'overflow-ellipsis', 'overflow-clip'],
+            'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'],
             /**
+             * Text Indent
+             * @see https://tailwindcss.com/docs/text-indent
+             */
+            indent: [{ indent: [spacing] }],
+            /**
              * Vertical Alignment
              * @see https://tailwindcss.com/docs/vertical-align
              */
-            'vertival-alignment': [
-                { align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom'] },
+            'vertical-align': [
+                {
+                    align: [
+                        'baseline',
+                        'top',
+                        'middle',
+                        'bottom',
+                        'text-top',
+                        'text-bottom',
+                        'sub',
+                        'super',
+                        isArbitraryLength,
+                    ],
+                },
             ],
@@ -899,3 +822,3 @@ /**
              */
-            'bg-position': [{ bg: getPositions() }],
+            'bg-position': [{ bg: [...getPositions(), isArbitraryPosition] }],
             /**
@@ -910,3 +833,3 @@ * Background Repeat
              */
-            'bg-size': [{ bg: ['auto', 'cover', 'contain'] }],
+            'bg-size': [{ bg: ['auto', 'cover', 'contain', isArbitrarySize] }],
             /**
@@ -917,3 +840,9 @@ * Background Image
             'bg-image': [
-                { bg: ['none', { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] }] },
+                {
+                    bg: [
+                        'none',
+                        { 'gradient-to': ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl'] },
+                        isArbitraryUrl,
+                    ],
+                },
             ],
@@ -997,2 +926,12 @@ /**
             /**
+             * Border Width X
+             * @see https://tailwindcss.com/docs/border-width
+             */
+            'border-w-x': [{ 'border-x': [borderWidth] }],
+            /**
+             * Border Width Y
+             * @see https://tailwindcss.com/docs/border-width
+             */
+            'border-w-y': [{ 'border-y': [borderWidth] }],
+            /**
              * Border Width Top
@@ -1026,3 +965,3 @@ * @see https://tailwindcss.com/docs/border-width
              */
-            'border-style': [{ border: getBorderStyles() }],
+            'border-style': [{ border: [...getLineStyles(), 'hidden'] }],
             /**
@@ -1057,3 +996,3 @@ * Divide Width X
              */
-            'divide-style': [{ divide: getBorderStyles() }],
+            'divide-style': [{ divide: getLineStyles() }],
             /**
@@ -1065,2 +1004,12 @@ * Border Color
             /**
+             * Border Color X
+             * @see https://tailwindcss.com/docs/border-color
+             */
+            'border-color-x': [{ 'border-x': [borderColor] }],
+            /**
+             * Border Color Y
+             * @see https://tailwindcss.com/docs/border-color
+             */
+            'border-color-y': [{ 'border-y': [borderColor] }],
+            /**
              * Border Color Top
@@ -1125,4 +1074,9 @@ * @see https://tailwindcss.com/docs/border-color
              */
-            shadow: [{ shadow: ['', ...getSizesSimple(), 'inner', 'none'] }],
+            shadow: [{ shadow: ['', 'inner', 'none', isTshirtSize] }],
             /**
+             * Box Shadow Color
+             * @see https://tailwindcss.com/docs/box-shadow-color
+             */
+            'shadow-color': [{ shadow: [isAny] }],
+            /**
              * Opacity
@@ -1162,3 +1116,3 @@ * @see https://tailwindcss.com/docs/opacity
              */
-            'drop-shadow': [{ 'drop-shadow': ['', ...getSizesSimple(), 'none'] }],
+            'drop-shadow': [{ 'drop-shadow': ['', 'none', isTshirtSize] }],
             /**
@@ -1265,3 +1219,3 @@ * Grayscale
                         'transform',
-                        isCustomValue,
+                        isArbitraryValue,
                     ],
@@ -1279,3 +1233,3 @@ },
              */
-            ease: [{ ease: ['linear', 'in', 'out', 'in-out', isCustomValue] }],
+            ease: [{ ease: ['linear', 'in', 'out', 'in-out', isArbitraryValue] }],
             /**
@@ -1290,3 +1244,3 @@ * Transition Delay
              */
-            animate: [{ animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isCustomValue] }],
+            animate: [{ animate: ['none', 'spin', 'ping', 'pulse', 'bounce', isArbitraryValue] }],
             // Transforms
@@ -1359,2 +1313,7 @@ /**
             /**
+             * Accent Color
+             * @see https://tailwindcss.com/docs/accent-color
+             */
+            accent: [{ accent: ['auto', colors] }],
+            /**
              * Appearance
@@ -1379,3 +1338,31 @@ * @see https://tailwindcss.com/docs/appearance
                         'not-allowed',
-                        isCustomValue,
+                        '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',
+                        isArbitraryValue,
                     ],
@@ -1385,7 +1372,22 @@ },
             /**
-             * Outline
-             * @see https://tailwindcss.com/docs/outline
+             * Outline Width
+             * @see https://tailwindcss.com/docs/outline-width
              */
-            outline: [{ outline: ['none', 'white', 'black'] }],
+            'outline-w': [{ outline: [isLength] }],
             /**
+             * Outline Style
+             * @see https://tailwindcss.com/docs/outline-style
+             */
+            'outline-style': [{ outline: ['', ...getLineStyles(), 'hidden'] }],
+            /**
+             * Outline Offset
+             * @see https://tailwindcss.com/docs/outline-offset
+             */
+            'outline-offset': [{ 'outline-offset': [isLength] }],
+            /**
+             * Outline Color
+             * @see https://tailwindcss.com/docs/outline-color
+             */
+            'outline-color': [{ outline: [colors] }],
+            /**
              * Pointer Events
@@ -1401,6 +1403,118 @@ * @see https://tailwindcss.com/docs/pointer-events
             /**
-             * Select
-             * @see https://tailwindcss.com/docs/select
+             * Scroll Margin
+             * @see https://tailwindcss.com/docs/scroll-margin
              */
+            'scroll-m': [{ 'scroll-m': [spacing] }],
+            /**
+             * Scroll Margin X
+             * @see https://tailwindcss.com/docs/scroll-margin
+             */
+            'scroll-mx': [{ 'scroll-mx': [spacing] }],
+            /**
+             * Scroll Margin Y
+             * @see https://tailwindcss.com/docs/scroll-margin
+             */
+            'scroll-my': [{ 'scroll-my': [spacing] }],
+            /**
+             * Scroll Margin Top
+             * @see https://tailwindcss.com/docs/scroll-margin
+             */
+            'scroll-mt': [{ 'scroll-mt': [spacing] }],
+            /**
+             * Scroll Margin Right
+             * @see https://tailwindcss.com/docs/scroll-margin
+             */
+            'scroll-mr': [{ 'scroll-mr': [spacing] }],
+            /**
+             * Scroll Margin Bottom
+             * @see https://tailwindcss.com/docs/scroll-margin
+             */
+            'scroll-mb': [{ 'scroll-mb': [spacing] }],
+            /**
+             * Scroll Margin Left
+             * @see https://tailwindcss.com/docs/scroll-margin
+             */
+            'scroll-ml': [{ 'scroll-ml': [spacing] }],
+            /**
+             * Scroll Padding
+             * @see https://tailwindcss.com/docs/scroll-padding
+             */
+            'scroll-p': [{ 'scroll-p': [spacing] }],
+            /**
+             * Scroll Padding X
+             * @see https://tailwindcss.com/docs/scroll-padding
+             */
+            'scroll-px': [{ 'scroll-px': [spacing] }],
+            /**
+             * Scroll Padding Y
+             * @see https://tailwindcss.com/docs/scroll-padding
+             */
+            'scroll-py': [{ 'scroll-py': [spacing] }],
+            /**
+             * Scroll Padding Top
+             * @see https://tailwindcss.com/docs/scroll-padding
+             */
+            'scroll-pt': [{ 'scroll-pt': [spacing] }],
+            /**
+             * Scroll Padding Right
+             * @see https://tailwindcss.com/docs/scroll-padding
+             */
+            'scroll-pr': [{ 'scroll-pr': [spacing] }],
+            /**
+             * Scroll Padding Bottom
+             * @see https://tailwindcss.com/docs/scroll-padding
+             */
+            'scroll-pb': [{ 'scroll-pb': [spacing] }],
+            /**
+             * Scroll Padding Left
+             * @see https://tailwindcss.com/docs/scroll-padding
+             */
+            'scroll-pl': [{ 'scroll-pl': [spacing] }],
+            /**
+             * 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',
+                        'pinch-zoom',
+                        'manipulation',
+                        { pan: ['x', 'left', 'right', 'y', 'up', 'down'] },
+                    ],
+                },
+            ],
+            /**
+             * 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', isArbitraryValue] },
+            ],
             // SVG
@@ -1411,3 +1525,3 @@ /**
              */
-            fill: [{ fill: ['current', isCustomValue] }],
+            fill: [{ fill: [colors] }],
             /**
@@ -1417,3 +1531,3 @@ * Stroke
              */
-            stroke: [{ stroke: ['current', isCustomValue] }],
+            stroke: [{ stroke: [colors] }],
             /**
@@ -1435,3 +1549,3 @@ * Stroke Width
              */
-            content: [{ content: [isCustomValue] }],
+            content: [{ content: [isArbitraryValue] }],
             /**
@@ -1449,3 +1563,3 @@ * Caret Color
             'inset-y': ['top', 'bottom'],
-            flex: ['flex-grow', 'flex-shrink'],
+            flex: ['basis', 'grow', 'shrink'],
             'col-start-end': ['col-start', 'col-end'],
@@ -1488,2 +1602,4 @@ 'row-start-end': ['row-start', 'row-end'],
             'border-w': ['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': [
@@ -1495,4 +1611,26 @@ 'border-color-t',
             ],
+            'border-color-x': ['border-color-r', 'border-color-l'],
+            'border-color-y': ['border-color-t', 'border-color-b'],
+            'scroll-m': [
+                'scroll-mx',
+                'scroll-my',
+                '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-pt',
+                'scroll-pr',
+                'scroll-pb',
+                'scroll-pl',
+            ],
+            'scroll-px': ['scroll-pr', 'scroll-pl'],
+            'scroll-py': ['scroll-pt', 'scroll-pb'],
         },
     } as const
 }

src/merge-classlist.ts

@@ -5,3 +5,3 @@ import { ConfigUtils } from './config-utils'
 const IMPORTANT_MODIFIER = '!'
-// Regex is needed so we don't match against colons in labels for custom values like `text-[color:var(--mystery-var)]`
+// Regex is needed so we don't match against colons in labels for arbitrary values like `text-[color:var(--mystery-var)]`
 // I'd prefer to use a negative lookbehind for all supported labels, but lookbheinds don't have good browser support yet. More info: https://caniuse.com/js-regexp-lookbehind
@@ -8,0 +8,0 @@ const PREFIX_SEPARATOR_REGEX = /:(?![^[]*\])/

src/validators.ts

@@ -1,4 +0,5 @@
-const customValueRegex = /^\[(.+)\]$/
+const arbitraryValueRegex = /^\[(.+)\]$/
 const fractionRegex = /^\d+\/\d+$/
 const stringLengths = new Set(['px', 'full', 'screen'])
+const tshirtUnitRegex = /^(\d+)?(xs|sm|md|lg|xl)$/
 const lengthUnitRegex = /\d+(%|px|em|rem|vh|vw|pt|pc|in|cm|mm|cap|ch|ex|lh|rlh|vi|vb|vmin|vmax)/
@@ -8,14 +9,14 @@
     return (
-        isCustomLength(classPart) ||
         !Number.isNaN(Number(classPart)) ||
         stringLengths.has(classPart) ||
-        fractionRegex.test(classPart)
+        fractionRegex.test(classPart) ||
+        isArbitraryLength(classPart)
     )
 }
 
-export function isCustomLength(classPart: string) {
-    const customValue = customValueRegex.exec(classPart)?.[1]
+export function isArbitraryLength(classPart: string) {
+    const arbitraryValue = arbitraryValueRegex.exec(classPart)?.[1]
 
-    if (customValue) {
-        return customValue.startsWith('length:') || lengthUnitRegex.test(customValue)
+    if (arbitraryValue) {
+        return arbitraryValue.startsWith('length:') || lengthUnitRegex.test(arbitraryValue)
     }
@@ -26,7 +27,35 @@
 
+export function isArbitrarySize(classPart: string) {
+    const arbitraryValue = arbitraryValueRegex.exec(classPart)?.[1]
+
+    return arbitraryValue ? arbitraryValue.startsWith('size:') : false
+}
+
+export function isArbitraryPosition(classPart: string) {
+    const arbitraryValue = arbitraryValueRegex.exec(classPart)?.[1]
+
+    return arbitraryValue ? arbitraryValue.startsWith('position:') : false
+}
+
+export function isArbitraryUrl(classPart: string) {
+    const arbitraryValue = arbitraryValueRegex.exec(classPart)?.[1]
+
+    return arbitraryValue
+        ? arbitraryValue.startsWith('url(') || arbitraryValue.startsWith('url:')
+        : false
+}
+
+export function isArbitraryWeight(classPart: string) {
+    const arbitraryValue = arbitraryValueRegex.exec(classPart)?.[1]
+
+    return arbitraryValue
+        ? !Number.isNaN(Number(arbitraryValue)) || arbitraryValue.startsWith('weight:')
+        : false
+}
+
 export function isInteger(classPart: string) {
-    const customValue = customValueRegex.exec(classPart)?.[1]
+    const arbitraryValue = arbitraryValueRegex.exec(classPart)?.[1]
 
-    if (customValue) {
-        return Number.isInteger(Number(customValue))
+    if (arbitraryValue) {
+        return Number.isInteger(Number(arbitraryValue))
     }
@@ -37,4 +66,4 @@
 
-export function isCustomValue(classPart: string) {
-    return customValueRegex.test(classPart)
+export function isArbitraryValue(classPart: string) {
+    return arbitraryValueRegex.test(classPart)
 }
@@ -45,1 +74,5 @@
 }
+
+export function isTshirtSize(classPart: string) {
+    return tshirtUnitRegex.test(classPart)
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

705939

increased by11.05%

Lines of code

10358

increased by11.22%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

604

increased by2.9%

No dependency changes