tailwind-merge 3.4.1 → 3.5.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.4.1/assets/logo.svg" alt="tailwind-merge" height="150px" />
+        <img src="https://github.com/dcastil/tailwind-merge/raw/v3.5.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 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))
+- Supports Tailwind v4.0 up to v4.2 (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.4.1/docs/what-is-it-for.md)
-- [When and how to use it](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/when-and-how-to-use-it.md)
-- [Features](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/features.md)
-- [Limitations](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/limitations.md)
-- [Configuration](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/configuration.md)
-- [Recipes](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/recipes.md)
-- [API reference](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/api-reference.md)
-- [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/writing-plugins.md)
-- [Versioning](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/versioning.md)
-- [Contributing](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/contributing.md)
-- [Similar packages](https://github.com/dcastil/tailwind-merge/tree/v3.4.1/docs/similar-packages.md)
+- [What is it for](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/what-is-it-for.md)
+- [When and how to use it](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/when-and-how-to-use-it.md)
+- [Features](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/features.md)
+- [Limitations](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/limitations.md)
+- [Configuration](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/configuration.md)
+- [Recipes](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/recipes.md)
+- [API reference](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/api-reference.md)
+- [Writing plugins](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/writing-plugins.md)
+- [Versioning](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/versioning.md)
+- [Contributing](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/contributing.md)
+- [Similar packages](https://github.com/dcastil/tailwind-merge/tree/v3.5.0/docs/similar-packages.md)

package/dist/bundle-cjs.js

@@ -494,7 +494,7 @@ const fromTheme = key => {
 };
 const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
 const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
-const fractionRegex = /^\d+\/\d+$/;
+const fractionRegex = /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/;
 const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
 const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
 const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
@@ -649,6 +649,8 @@ const getDefaultConfig = () => {
   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 scaleSizingInline = () => [isFraction, 'screen', 'full', 'dvw', 'lvw', 'svw', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
+  const scaleSizingBlock = () => [isFraction, 'screen', 'full', 'lh', 'dvh', 'lvh', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
   const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
   const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
     position: [isArbitraryVariable, isArbitraryValue]
@@ -847,40 +849,66 @@ const getDefaultConfig = () => {
        */
       position: ['static', 'fixed', 'absolute', 'relative', 'sticky'],
       /**
-       * Top / Right / Bottom / Left
+       * Inset
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       inset: [{
         inset: scaleInset()
       }],
       /**
-       * Right / Left
+       * Inset Inline
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       'inset-x': [{
         'inset-x': scaleInset()
       }],
       /**
-       * Top / Bottom
+       * Inset Block
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       'inset-y': [{
         'inset-y': scaleInset()
       }],
       /**
-       * Start
+       * Inset Inline Start
        * @see https://tailwindcss.com/docs/top-right-bottom-left
+       * @todo class group will be renamed to `inset-s` in next major release
        */
       start: [{
+        'inset-s': scaleInset(),
+        /**
+         * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-s-*` utilities.
+         * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
+         */
         start: scaleInset()
       }],
       /**
-       * End
+       * Inset Inline End
        * @see https://tailwindcss.com/docs/top-right-bottom-left
+       * @todo class group will be renamed to `inset-e` in next major release
        */
       end: [{
+        'inset-e': scaleInset(),
+        /**
+         * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-e-*` utilities.
+         * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
+         */
         end: scaleInset()
       }],
+      /**
+       * Inset Block Start
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      'inset-bs': [{
+        'inset-bs': scaleInset()
+      }],
+      /**
+       * Inset Block End
+       * @see https://tailwindcss.com/docs/top-right-bottom-left
+       */
+      'inset-be': [{
+        'inset-be': scaleInset()
+      }],
       /**
        * Top
        * @see https://tailwindcss.com/docs/top-right-bottom-left
@@ -1147,33 +1175,47 @@ const getDefaultConfig = () => {
         p: scaleUnambiguousSpacing()
       }],
       /**
-       * Padding X
+       * Padding Inline
        * @see https://tailwindcss.com/docs/padding
        */
       px: [{
         px: scaleUnambiguousSpacing()
       }],
       /**
-       * Padding Y
+       * Padding Block
        * @see https://tailwindcss.com/docs/padding
        */
       py: [{
         py: scaleUnambiguousSpacing()
       }],
       /**
-       * Padding Start
+       * Padding Inline Start
        * @see https://tailwindcss.com/docs/padding
        */
       ps: [{
         ps: scaleUnambiguousSpacing()
       }],
       /**
-       * Padding End
+       * Padding Inline End
        * @see https://tailwindcss.com/docs/padding
        */
       pe: [{
         pe: scaleUnambiguousSpacing()
       }],
+      /**
+       * Padding Block Start
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pbs: [{
+        pbs: scaleUnambiguousSpacing()
+      }],
+      /**
+       * Padding Block End
+       * @see https://tailwindcss.com/docs/padding
+       */
+      pbe: [{
+        pbe: scaleUnambiguousSpacing()
+      }],
       /**
        * Padding Top
        * @see https://tailwindcss.com/docs/padding
@@ -1210,33 +1252,47 @@ const getDefaultConfig = () => {
         m: scaleMargin()
       }],
       /**
-       * Margin X
+       * Margin Inline
        * @see https://tailwindcss.com/docs/margin
        */
       mx: [{
         mx: scaleMargin()
       }],
       /**
-       * Margin Y
+       * Margin Block
        * @see https://tailwindcss.com/docs/margin
        */
       my: [{
         my: scaleMargin()
       }],
       /**
-       * Margin Start
+       * Margin Inline Start
        * @see https://tailwindcss.com/docs/margin
        */
       ms: [{
         ms: scaleMargin()
       }],
       /**
-       * Margin End
+       * Margin Inline End
        * @see https://tailwindcss.com/docs/margin
        */
       me: [{
         me: scaleMargin()
       }],
+      /**
+       * Margin Block Start
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mbs: [{
+        mbs: scaleMargin()
+      }],
+      /**
+       * Margin Block End
+       * @see https://tailwindcss.com/docs/margin
+       */
+      mbe: [{
+        mbe: scaleMargin()
+      }],
       /**
        * Margin Top
        * @see https://tailwindcss.com/docs/margin
@@ -1299,6 +1355,48 @@ const getDefaultConfig = () => {
       size: [{
         size: scaleSizing()
       }],
+      /**
+       * Inline Size
+       * @see https://tailwindcss.com/docs/width
+       */
+      'inline-size': [{
+        inline: ['auto', ...scaleSizingInline()]
+      }],
+      /**
+       * Min-Inline Size
+       * @see https://tailwindcss.com/docs/min-width
+       */
+      'min-inline-size': [{
+        'min-inline': ['auto', ...scaleSizingInline()]
+      }],
+      /**
+       * Max-Inline Size
+       * @see https://tailwindcss.com/docs/max-width
+       */
+      'max-inline-size': [{
+        'max-inline': ['none', ...scaleSizingInline()]
+      }],
+      /**
+       * Block Size
+       * @see https://tailwindcss.com/docs/height
+       */
+      'block-size': [{
+        block: ['auto', ...scaleSizingBlock()]
+      }],
+      /**
+       * Min-Block Size
+       * @see https://tailwindcss.com/docs/min-height
+       */
+      'min-block-size': [{
+        'min-block': ['auto', ...scaleSizingBlock()]
+      }],
+      /**
+       * Max-Block Size
+       * @see https://tailwindcss.com/docs/max-height
+       */
+      'max-block-size': [{
+        'max-block': ['none', ...scaleSizingBlock()]
+      }],
       /**
        * Width
        * @see https://tailwindcss.com/docs/width
@@ -1387,6 +1485,13 @@ const getDefaultConfig = () => {
       'font-family': [{
         font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont]
       }],
+      /**
+       * Font Feature Settings
+       * @see https://tailwindcss.com/docs/font-feature-settings
+       */
+      'font-features': [{
+        'font-features': [isArbitraryValue]
+      }],
       /**
        * Font Variant Numeric
        * @see https://tailwindcss.com/docs/font-variant-numeric
@@ -1804,33 +1909,47 @@ const getDefaultConfig = () => {
         border: scaleBorderWidth()
       }],
       /**
-       * Border Width X
+       * Border Width Inline
        * @see https://tailwindcss.com/docs/border-width
        */
       'border-w-x': [{
         'border-x': scaleBorderWidth()
       }],
       /**
-       * Border Width Y
+       * Border Width Block
        * @see https://tailwindcss.com/docs/border-width
        */
       'border-w-y': [{
         'border-y': scaleBorderWidth()
       }],
       /**
-       * Border Width Start
+       * Border Width Inline Start
        * @see https://tailwindcss.com/docs/border-width
        */
       'border-w-s': [{
         'border-s': scaleBorderWidth()
       }],
       /**
-       * Border Width End
+       * Border Width Inline End
        * @see https://tailwindcss.com/docs/border-width
        */
       'border-w-e': [{
         'border-e': scaleBorderWidth()
       }],
+      /**
+       * Border Width Block Start
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-bs': [{
+        'border-bs': scaleBorderWidth()
+      }],
+      /**
+       * Border Width Block End
+       * @see https://tailwindcss.com/docs/border-width
+       */
+      'border-w-be': [{
+        'border-be': scaleBorderWidth()
+      }],
       /**
        * Border Width Top
        * @see https://tailwindcss.com/docs/border-width
@@ -1905,33 +2024,47 @@ const getDefaultConfig = () => {
         border: scaleColor()
       }],
       /**
-       * Border Color X
+       * Border Color Inline
        * @see https://tailwindcss.com/docs/border-color
        */
       'border-color-x': [{
         'border-x': scaleColor()
       }],
       /**
-       * Border Color Y
+       * Border Color Block
        * @see https://tailwindcss.com/docs/border-color
        */
       'border-color-y': [{
         'border-y': scaleColor()
       }],
       /**
-       * Border Color S
+       * Border Color Inline Start
        * @see https://tailwindcss.com/docs/border-color
        */
       'border-color-s': [{
         'border-s': scaleColor()
       }],
       /**
-       * Border Color E
+       * Border Color Inline End
        * @see https://tailwindcss.com/docs/border-color
        */
       'border-color-e': [{
         'border-e': scaleColor()
       }],
+      /**
+       * Border Color Block Start
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-bs': [{
+        'border-bs': scaleColor()
+      }],
+      /**
+       * Border Color Block End
+       * @see https://tailwindcss.com/docs/border-color
+       */
+      'border-color-be': [{
+        'border-be': scaleColor()
+      }],
       /**
        * Border Color Top
        * @see https://tailwindcss.com/docs/border-color
@@ -2792,33 +2925,47 @@ const getDefaultConfig = () => {
         'scroll-m': scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Margin X
+       * Scroll Margin Inline
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       'scroll-mx': [{
         'scroll-mx': scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Margin Y
+       * Scroll Margin Block
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       'scroll-my': [{
         'scroll-my': scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Margin Start
+       * Scroll Margin Inline Start
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       'scroll-ms': [{
         'scroll-ms': scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Margin End
+       * Scroll Margin Inline End
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       'scroll-me': [{
         'scroll-me': scaleUnambiguousSpacing()
       }],
+      /**
+       * Scroll Margin Block Start
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mbs': [{
+        'scroll-mbs': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Margin Block End
+       * @see https://tailwindcss.com/docs/scroll-margin
+       */
+      'scroll-mbe': [{
+        'scroll-mbe': scaleUnambiguousSpacing()
+      }],
       /**
        * Scroll Margin Top
        * @see https://tailwindcss.com/docs/scroll-margin
@@ -2855,33 +3002,47 @@ const getDefaultConfig = () => {
         'scroll-p': scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Padding X
+       * Scroll Padding Inline
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       'scroll-px': [{
         'scroll-px': scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Padding Y
+       * Scroll Padding Block
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       'scroll-py': [{
         'scroll-py': scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Padding Start
+       * Scroll Padding Inline Start
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       'scroll-ps': [{
         'scroll-ps': scaleUnambiguousSpacing()
       }],
       /**
-       * Scroll Padding End
+       * Scroll Padding Inline End
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       'scroll-pe': [{
         'scroll-pe': scaleUnambiguousSpacing()
       }],
+      /**
+       * Scroll Padding Block Start
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pbs': [{
+        'scroll-pbs': scaleUnambiguousSpacing()
+      }],
+      /**
+       * Scroll Padding Block End
+       * @see https://tailwindcss.com/docs/scroll-padding
+       */
+      'scroll-pbe': [{
+        'scroll-pbe': scaleUnambiguousSpacing()
+      }],
       /**
        * Scroll Padding Top
        * @see https://tailwindcss.com/docs/scroll-padding
@@ -3016,15 +3177,15 @@ const getDefaultConfig = () => {
     conflictingClassGroups: {
       overflow: ['overflow-x', 'overflow-y'],
       overscroll: ['overscroll-x', 'overscroll-y'],
-      inset: ['inset-x', 'inset-y', 'start', 'end', 'top', 'right', 'bottom', 'left'],
+      inset: ['inset-x', 'inset-y', 'inset-bs', 'inset-be', 'start', 'end', 'top', 'right', 'bottom', 'left'],
       'inset-x': ['right', 'left'],
       'inset-y': ['top', 'bottom'],
       flex: ['basis', 'grow', 'shrink'],
       gap: ['gap-x', 'gap-y'],
-      p: ['px', 'py', 'ps', 'pe', 'pt', 'pr', 'pb', 'pl'],
+      p: ['px', 'py', 'ps', 'pe', 'pbs', 'pbe', 'pt', 'pr', 'pb', 'pl'],
       px: ['pr', 'pl'],
       py: ['pt', 'pb'],
-      m: ['mx', 'my', 'ms', 'me', 'mt', 'mr', 'mb', 'ml'],
+      m: ['mx', 'my', 'ms', 'me', 'mbs', 'mbe', 'mt', 'mr', 'mb', 'ml'],
       mx: ['mr', 'ml'],
       my: ['mt', 'mb'],
       size: ['w', 'h'],
@@ -3044,18 +3205,18 @@ 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-x', 'border-w-y', '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-bs', 'border-w-be', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
       'border-w-x': ['border-w-r', 'border-w-l'],
       'border-w-y': ['border-w-t', 'border-w-b'],
-      'border-color': ['border-color-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
+      'border-color': ['border-color-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-bs', 'border-color-be', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
       'border-color-x': ['border-color-r', 'border-color-l'],
       'border-color-y': ['border-color-t', 'border-color-b'],
       translate: ['translate-x', 'translate-y', 'translate-none'],
       'translate-none': ['translate', 'translate-x', 'translate-y', 'translate-z'],
-      'scroll-m': ['scroll-mx', 'scroll-my', 'scroll-ms', 'scroll-me', 'scroll-mt', 'scroll-mr', 'scroll-mb', 'scroll-ml'],
+      'scroll-m': ['scroll-mx', 'scroll-my', 'scroll-ms', 'scroll-me', 'scroll-mbs', 'scroll-mbe', 'scroll-mt', 'scroll-mr', 'scroll-mb', 'scroll-ml'],
       'scroll-mx': ['scroll-mr', 'scroll-ml'],
       'scroll-my': ['scroll-mt', 'scroll-mb'],
-      'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
+      'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pbs', 'scroll-pbe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
       'scroll-px': ['scroll-pr', 'scroll-pl'],
       'scroll-py': ['scroll-pt', 'scroll-pb'],
       touch: ['touch-x', 'touch-y', 'touch-pz'],