tailwind-merge 3.1.0 → 3.2.0

package/README.md

@@ -3,7 +3,7 @@
 <div align="center">
     <br />
     <a href="https://github.com/dcastil/tailwind-merge">
-        <img src="https://github.com/dcastil/tailwind-merge/raw/v3.1.0/assets/logo.svg" alt="tailwind-merge" height="150px" />
+        <img src="https://github.com/dcastil/tailwind-merge/raw/v3.2.0/assets/logo.svg" alt="tailwind-merge" height="150px" />
     </a>
 </div>
 
@@ -18,21 +18,21 @@ twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
 // → 'hover:bg-dark-red p-3 bg-[#B91C1C]'
 ```
 
-- Supports Tailwind v4.0 (if you use Tailwind v3, use [tailwind-merge v2.6.0](https://github.com/dcastil/tailwind-merge/tree/v2.6.0))
+- Supports Tailwind v4.0 up to v4.1 (if you use Tailwind v3, use [tailwind-merge v2.6.0](https://github.com/dcastil/tailwind-merge/tree/v2.6.0))
 - Works in all modern browsers and maintained Node versions
 - Fully typed
 - [Check bundle size on Bundlephobia](https://bundlephobia.com/package/tailwind-merge)
 
 ## Get started
 
-- [What is it for](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/what-is-it-for.md)
-- [When and how to use it](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/when-and-how-to-use-it.md)
-- [Features](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/features.md)
-- [Limitations](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/limitations.md)
-- [Configuration](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/configuration.md)
-- [Recipes](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/recipes.md)
-- [API reference](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/api-reference.md)
-- [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/writing-plugins.md)
-- [Versioning](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/versioning.md)
-- [Contributing](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/contributing.md)
-- [Similar packages](https://github.com/dcastil/tailwind-merge/tree/v3.1.0/docs/similar-packages.md)
+- [What is it for](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/what-is-it-for.md)
+- [When and how to use it](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/when-and-how-to-use-it.md)
+- [Features](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/features.md)
+- [Limitations](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/limitations.md)
+- [Configuration](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/configuration.md)
+- [Recipes](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/recipes.md)
+- [API reference](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/api-reference.md)
+- [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/writing-plugins.md)
+- [Versioning](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/versioning.md)
+- [Contributing](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/contributing.md)
+- [Similar packages](https://github.com/dcastil/tailwind-merge/tree/v3.2.0/docs/similar-packages.md)

package/dist/bundle-cjs.js

@@ -422,8 +422,8 @@ const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
 const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
 const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
 const isFraction = value => fractionRegex.test(value);
-const isNumber = value => Boolean(value) && !Number.isNaN(Number(value));
-const isInteger = value => Boolean(value) && Number.isInteger(Number(value));
+const isNumber = value => !!value && !Number.isNaN(Number(value));
+const isInteger = value => !!value && Number.isInteger(Number(value));
 const isPercent = value => value.endsWith('%') && isNumber(value.slice(0, -1));
 const isTshirtSize = value => tshirtUnitRegex.test(value);
 const isAny = () => true;
@@ -442,7 +442,7 @@ const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isL
 const isArbitraryNumber = value => getIsArbitraryValue(value, isLabelNumber, isNumber);
 const isArbitraryPosition = value => getIsArbitraryValue(value, isLabelPosition, isNever);
 const isArbitraryImage = value => getIsArbitraryValue(value, isLabelImage, isImage);
-const isArbitraryShadow = value => getIsArbitraryValue(value, isNever, isShadow);
+const isArbitraryShadow = value => getIsArbitraryValue(value, isLabelShadow, isShadow);
 const isArbitraryVariable = value => arbitraryVariableRegex.test(value);
 const isArbitraryVariableLength = value => getIsArbitraryVariable(value, isLabelLength);
 const isArbitraryVariableFamilyName = value => getIsArbitraryVariable(value, isLabelFamilyName);
@@ -472,11 +472,9 @@ const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) =>
   return false;
 };
 // Labels
-const isLabelPosition = label => label === 'position';
-const imageLabels = /*#__PURE__*/new Set(['image', 'url']);
-const isLabelImage = label => imageLabels.has(label);
-const sizeLabels = /*#__PURE__*/new Set(['length', 'size', 'percentage']);
-const isLabelSize = label => sizeLabels.has(label);
+const isLabelPosition = label => label === 'position' || label === 'percentage';
+const isLabelImage = label => label === 'image' || label === 'url';
+const isLabelSize = label => label === 'length' || label === 'size' || label === 'bg-size';
 const isLabelLength = label => label === 'length';
 const isLabelNumber = label => label === 'number';
 const isLabelFamilyName = label => label === 'family-name';
@@ -525,6 +523,7 @@ const getDefaultConfig = () => {
   const themeRadius = fromTheme('radius');
   const themeShadow = fromTheme('shadow');
   const themeInsetShadow = fromTheme('inset-shadow');
+  const themeTextShadow = fromTheme('text-shadow');
   const themeDropShadow = fromTheme('drop-shadow');
   const themeBlur = fromTheme('blur');
   const themePerspective = fromTheme('perspective');
@@ -539,7 +538,16 @@ const getDefaultConfig = () => {
    */
   /***/
   const scaleBreak = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
-  const scalePosition = () => ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top'];
+  const scalePosition = () => ['center', 'top', 'bottom', 'left', 'right', 'top-left',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'left-top', 'top-right',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'right-top', 'bottom-right',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'right-bottom', 'bottom-left',
+  // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
+  'left-bottom'];
+  const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
   const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
   const scaleOverscroll = () => ['auto', 'contain', 'none'];
   const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
@@ -550,11 +558,20 @@ const getDefaultConfig = () => {
   }, isInteger, isArbitraryVariable, isArbitraryValue];
   const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
   const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
-  const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline'];
-  const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch'];
+  const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline', 'center-safe', 'end-safe'];
+  const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
   const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
   const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
   const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
+  const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
+    position: [isArbitraryVariable, isArbitraryValue]
+  }];
+  const scaleBgRepeat = () => ['no-repeat', {
+    repeat: ['', 'x', 'y', 'space', 'round']
+  }];
+  const scaleBgSize = () => ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize, {
+    size: [isArbitraryVariable, isArbitraryValue]
+  }];
   const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
   const scaleRadius = () => [
   // Deprecated since Tailwind CSS v4.0.0
@@ -562,10 +579,10 @@ const getDefaultConfig = () => {
   const scaleBorderWidth = () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength];
   const scaleLineStyle = () => ['solid', 'dashed', 'dotted', 'double'];
   const scaleBlendMode = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
+  const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
   const scaleBlur = () => [
   // Deprecated since Tailwind CSS v4.0.0
   '', 'none', themeBlur, isArbitraryVariable, isArbitraryValue];
-  const scaleOrigin = () => ['center', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', 'left', 'top-left', isArbitraryVariable, isArbitraryValue];
   const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
   const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
   const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
@@ -590,6 +607,7 @@ const getDefaultConfig = () => {
       shadow: [isTshirtSize],
       spacing: ['px', isNumber],
       text: [isTshirtSize],
+      'text-shadow': [isTshirtSize],
       tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest']
     },
     classGroups: {
@@ -692,7 +710,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/object-position
        */
       'object-position': [{
-        object: [...scalePosition(), isArbitraryValue, isArbitraryVariable]
+        object: scalePositionWithArbitrary()
       }],
       /**
        * Overflow
@@ -999,14 +1017,18 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/align-items
        */
       'align-items': [{
-        items: [...scaleAlignSecondaryAxis(), 'baseline']
+        items: [...scaleAlignSecondaryAxis(), {
+          baseline: ['', 'last']
+        }]
       }],
       /**
        * Align Self
        * @see https://tailwindcss.com/docs/align-self
        */
       'align-self': [{
-        self: ['auto', ...scaleAlignSecondaryAxis(), 'baseline']
+        self: ['auto', ...scaleAlignSecondaryAxis(), {
+          baseline: ['', 'last']
+        }]
       }],
       /**
        * Place Content
@@ -1451,6 +1473,13 @@ const getDefaultConfig = () => {
       break: [{
         break: ['normal', 'words', 'all', 'keep']
       }],
+      /**
+       * Overflow Wrap
+       * @see https://tailwindcss.com/docs/overflow-wrap
+       */
+      wrap: [{
+        wrap: ['break-word', 'anywhere', 'normal']
+      }],
       /**
        * Hyphens
        * @see https://tailwindcss.com/docs/hyphens
@@ -1494,23 +1523,21 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/background-position
        */
       'bg-position': [{
-        bg: [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition]
+        bg: scaleBgPosition()
       }],
       /**
        * Background Repeat
        * @see https://tailwindcss.com/docs/background-repeat
        */
       'bg-repeat': [{
-        bg: ['no-repeat', {
-          repeat: ['', 'x', 'y', 'space', 'round']
-        }]
+        bg: scaleBgRepeat()
       }],
       /**
        * Background Size
        * @see https://tailwindcss.com/docs/background-size
        */
       'bg-size': [{
-        bg: ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize]
+        bg: scaleBgSize()
       }],
       /**
        * Background Image
@@ -1879,7 +1906,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/outline-color
        */
       'outline-color': [{
-        outline: [themeColor]
+        outline: scaleColor()
       }],
       // ---------------
       // --- Effects ---
@@ -1905,7 +1932,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
        */
       'inset-shadow': [{
-        'inset-shadow': ['none', isArbitraryVariable, isArbitraryValue, themeInsetShadow]
+        'inset-shadow': ['none', themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
       }],
       /**
        * Inset Box Shadow Color
@@ -1967,6 +1994,20 @@ const getDefaultConfig = () => {
       'inset-ring-color': [{
         'inset-ring': scaleColor()
       }],
+      /**
+       * Text Shadow
+       * @see https://tailwindcss.com/docs/text-shadow
+       */
+      'text-shadow': [{
+        'text-shadow': ['none', themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
+      }],
+      /**
+       * Text Shadow Color
+       * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
+       */
+      'text-shadow-color': [{
+        'text-shadow': scaleColor()
+      }],
       /**
        * Opacity
        * @see https://tailwindcss.com/docs/opacity
@@ -1988,6 +2029,202 @@ const getDefaultConfig = () => {
       'bg-blend': [{
         'bg-blend': scaleBlendMode()
       }],
+      /**
+       * Mask Clip
+       * @see https://tailwindcss.com/docs/mask-clip
+       */
+      'mask-clip': [{
+        'mask-clip': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
+      }, 'mask-no-clip'],
+      /**
+       * Mask Composite
+       * @see https://tailwindcss.com/docs/mask-composite
+       */
+      'mask-composite': [{
+        mask: ['add', 'subtract', 'intersect', 'exclude']
+      }],
+      /**
+       * Mask Image
+       * @see https://tailwindcss.com/docs/mask-image
+       */
+      'mask-image-linear-pos': [{
+        'mask-linear': [isNumber]
+      }],
+      'mask-image-linear-from-pos': [{
+        'mask-linear-from': scaleMaskImagePosition()
+      }],
+      'mask-image-linear-to-pos': [{
+        'mask-linear-to': scaleMaskImagePosition()
+      }],
+      'mask-image-linear-from-color': [{
+        'mask-linear-from': scaleColor()
+      }],
+      'mask-image-linear-to-color': [{
+        'mask-linear-to': scaleColor()
+      }],
+      'mask-image-t-from-pos': [{
+        'mask-t-from': scaleMaskImagePosition()
+      }],
+      'mask-image-t-to-pos': [{
+        'mask-t-to': scaleMaskImagePosition()
+      }],
+      'mask-image-t-from-color': [{
+        'mask-t-from': scaleColor()
+      }],
+      'mask-image-t-to-color': [{
+        'mask-t-to': scaleColor()
+      }],
+      'mask-image-r-from-pos': [{
+        'mask-r-from': scaleMaskImagePosition()
+      }],
+      'mask-image-r-to-pos': [{
+        'mask-r-to': scaleMaskImagePosition()
+      }],
+      'mask-image-r-from-color': [{
+        'mask-r-from': scaleColor()
+      }],
+      'mask-image-r-to-color': [{
+        'mask-r-to': scaleColor()
+      }],
+      'mask-image-b-from-pos': [{
+        'mask-b-from': scaleMaskImagePosition()
+      }],
+      'mask-image-b-to-pos': [{
+        'mask-b-to': scaleMaskImagePosition()
+      }],
+      'mask-image-b-from-color': [{
+        'mask-b-from': scaleColor()
+      }],
+      'mask-image-b-to-color': [{
+        'mask-b-to': scaleColor()
+      }],
+      'mask-image-l-from-pos': [{
+        'mask-l-from': scaleMaskImagePosition()
+      }],
+      'mask-image-l-to-pos': [{
+        'mask-l-to': scaleMaskImagePosition()
+      }],
+      'mask-image-l-from-color': [{
+        'mask-l-from': scaleColor()
+      }],
+      'mask-image-l-to-color': [{
+        'mask-l-to': scaleColor()
+      }],
+      'mask-image-x-from-pos': [{
+        'mask-x-from': scaleMaskImagePosition()
+      }],
+      'mask-image-x-to-pos': [{
+        'mask-x-to': scaleMaskImagePosition()
+      }],
+      'mask-image-x-from-color': [{
+        'mask-x-from': scaleColor()
+      }],
+      'mask-image-x-to-color': [{
+        'mask-x-to': scaleColor()
+      }],
+      'mask-image-y-from-pos': [{
+        'mask-y-from': scaleMaskImagePosition()
+      }],
+      'mask-image-y-to-pos': [{
+        'mask-y-to': scaleMaskImagePosition()
+      }],
+      'mask-image-y-from-color': [{
+        'mask-y-from': scaleColor()
+      }],
+      'mask-image-y-to-color': [{
+        'mask-y-to': scaleColor()
+      }],
+      'mask-image-radial': [{
+        'mask-radial': [isArbitraryVariable, isArbitraryValue]
+      }],
+      'mask-image-radial-from-pos': [{
+        'mask-radial-from': scaleMaskImagePosition()
+      }],
+      'mask-image-radial-to-pos': [{
+        'mask-radial-to': scaleMaskImagePosition()
+      }],
+      'mask-image-radial-from-color': [{
+        'mask-radial-from': scaleColor()
+      }],
+      'mask-image-radial-to-color': [{
+        'mask-radial-to': scaleColor()
+      }],
+      'mask-image-radial-shape': [{
+        'mask-radial': ['circle', 'ellipse']
+      }],
+      'mask-image-radial-size': [{
+        'mask-radial': [{
+          closest: ['side', 'corner'],
+          farthest: ['side', 'corner']
+        }]
+      }],
+      'mask-image-radial-pos': [{
+        'mask-radial-at': scalePosition()
+      }],
+      'mask-image-conic-pos': [{
+        'mask-conic': [isNumber]
+      }],
+      'mask-image-conic-from-pos': [{
+        'mask-conic-from': scaleMaskImagePosition()
+      }],
+      'mask-image-conic-to-pos': [{
+        'mask-conic-to': scaleMaskImagePosition()
+      }],
+      'mask-image-conic-from-color': [{
+        'mask-conic-from': scaleColor()
+      }],
+      'mask-image-conic-to-color': [{
+        'mask-conic-to': scaleColor()
+      }],
+      /**
+       * Mask Mode
+       * @see https://tailwindcss.com/docs/mask-mode
+       */
+      'mask-mode': [{
+        mask: ['alpha', 'luminance', 'match']
+      }],
+      /**
+       * Mask Origin
+       * @see https://tailwindcss.com/docs/mask-origin
+       */
+      'mask-origin': [{
+        'mask-origin': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
+      }],
+      /**
+       * Mask Position
+       * @see https://tailwindcss.com/docs/mask-position
+       */
+      'mask-position': [{
+        mask: scaleBgPosition()
+      }],
+      /**
+       * Mask Repeat
+       * @see https://tailwindcss.com/docs/mask-repeat
+       */
+      'mask-repeat': [{
+        mask: scaleBgRepeat()
+      }],
+      /**
+       * Mask Size
+       * @see https://tailwindcss.com/docs/mask-size
+       */
+      'mask-size': [{
+        mask: scaleBgSize()
+      }],
+      /**
+       * Mask Type
+       * @see https://tailwindcss.com/docs/mask-type
+       */
+      'mask-type': [{
+        'mask-type': ['alpha', 'luminance']
+      }],
+      /**
+       * Mask Image
+       * @see https://tailwindcss.com/docs/mask-image
+       */
+      'mask-image': [{
+        mask: ['none', isArbitraryVariable, isArbitraryValue]
+      }],
       // ---------------
       // --- Filters ---
       // ---------------
@@ -2028,7 +2265,14 @@ const getDefaultConfig = () => {
       'drop-shadow': [{
         'drop-shadow': [
         // Deprecated since Tailwind CSS v4.0.0
-        '', 'none', themeDropShadow, isArbitraryVariable, isArbitraryValue]
+        '', 'none', themeDropShadow, isArbitraryVariableShadow, isArbitraryShadow]
+      }],
+      /**
+       * Drop Shadow Color
+       * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
+       */
+      'drop-shadow-color': [{
+        'drop-shadow': scaleColor()
       }],
       /**
        * Grayscale
@@ -2249,7 +2493,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/perspective-origin
        */
       'perspective-origin': [{
-        'perspective-origin': scaleOrigin()
+        'perspective-origin': scalePositionWithArbitrary()
       }],
       /**
        * Rotate
@@ -2345,7 +2589,7 @@ const getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/transform-origin
        */
       'transform-origin': [{
-        origin: scaleOrigin()
+        origin: scalePositionWithArbitrary()
       }],
       /**
        * Transform Style
@@ -2713,10 +2957,10 @@ const getDefaultConfig = () => {
       'rounded-b': ['rounded-br', 'rounded-bl'],
       'rounded-l': ['rounded-tl', 'rounded-bl'],
       'border-spacing': ['border-spacing-x', 'border-spacing-y'],
-      'border-w': ['border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
+      'border-w': ['border-w-x', 'border-w-y', 'border-w-s', 'border-w-e', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
       'border-w-x': ['border-w-r', 'border-w-l'],
       'border-w-y': ['border-w-t', 'border-w-b'],
-      'border-color': ['border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
+      'border-color': ['border-color-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
       'border-color-x': ['border-color-r', 'border-color-l'],
       'border-color-y': ['border-color-t', 'border-color-b'],
       translate: ['translate-x', 'translate-y', 'translate-none'],
@@ -2735,7 +2979,7 @@ const getDefaultConfig = () => {
     conflictingClassGroupModifiers: {
       'font-size': ['leading']
     },
-    orderSensitiveModifiers: ['before', 'after', 'placeholder', 'file', 'marker', 'selection', 'first-line', 'first-letter', 'backdrop', '*', '**']
+    orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
   };
 };