Is it possible to ensure that text-{number}base is not excluded?

[otacleT]

I need to strictly match styles with our design specifications, so I've configured tailwind.config.js to support font sizes like 15px and 17px as follows:

theme: {
  extend: {
    /**
     * Default Font Size Reference
     *
     * Font Size Guide
     * ------------------------
     * Class    |    Size
     * ------------------------
     * xs      |    12px
     * sm      |    14px
     * base    |    16px
     * lg      |    18px
     * xl      |    20px
     * 2xl     |    24px
     * 3xl     |    30px
     *
     * @see https://tailwindcss.com/docs/font-size
     */
    fontSize: {
      "1.5sm": "0.9375rem",   // 15px
      "1.5base": "1.0625rem", // 17px
      "1.5lg": "1.1875rem",   // 19px
      "1.5xl": "1.375rem",    // 22px
      "2.5xl": "1.6875rem",   // 27px
    },
  },
}

However, when using twMerge with text color, only the 1.5base class gets excluded:

twMerge('text-1.5sm text-white')
// output: 'text-1.5sm text-white'

twMerge('text-1.5base text-white')
// output: 'text-white'

I found a similar discussion here:
#489

Looking at the code, this behavior seems to be related to the following section in src/lib/default-config.ts:

/**
* Font Size
* @see https://tailwindcss.com/docs/font-size
*/
'font-size': [{ text: ['base', isTshirtSize, isArbitraryLength] }],

Would it be possible to update the 'base' part to accept patterns matching /^(\d+(\.\d+)?)?(base)$/? This would allow for classes like 1.5base to work correctly with twMerge.

[quangnmwork]

@otacleT
Hi,

Actually you can use extendTailwindMerge for override the rule of twMerge . Specify as follows :

export const twMergeCustom = extendTailwindMerge({
  override: {
    classGroups: {
      'font-size': ['1.5sm', '1.5base', '1.5lg'],
      'text-color': ['blue-500'],
    },
  },
})

then use twMerge('text-1.5base text-white') in your code.

Reproduce here https://stackblitz.com/edit/vitejs-vite-cwjwfamp?file=tailwind.config.cjs,src%2Fapp.tsx,src%2Futils.ts,src%2Findex.css

[otacleT]

@quangnmwork
Hi,

Thank you for sharing the extendTailwindMerge approach.

It looks like a straightforward way to handle custom classes like 1.5base.
I originally started this discussion because text-1.5base wasn’t working with Tailwind Variants (which uses Tailwind Merge internally), but I found that your solution can also be applied there. For example:

const button = tv(
  {
    base: "text-1.5base text-white",
  },
  {
    twMergeConfig: {
      classGroups: {
        "font-size": [{ text: ["1.5base"] }],
      },
    },
  }
);

I’d still like to hear the author’s thoughts on updating the base pattern to support /^(\d+(\.\d+)?)?(base)$/, but this workaround resolves the issue for now. Thanks again for your help!

[quangnmwork]

@otacleT

The reason why use extendTailwindMerge is mentioned in docs

"Function to create merge function with custom config which extends the default config. Use this if you use the default Tailwind config and just modified it in some places."

That means if you want to override the default config of twMerge. Use extendTailwindMerge instead. So I think supporting your pattern is not necessary. You can customize your own pattern.

[otacleT]

@quangnmwork
Ah got it. Thanks 🙂

[dcastil]

Hey @otacleT! 👋

I fully agree with @quangnmwork. The default config of tailwind-merge only covers what Tailwind CSS gives you without any configuration. That's important to prevent accidentally treating non-Tailwind classes as such.

If you added a config in tailwind.config.js, you'll need to configure tailwind-merge with extendTailwindMerge. You can use the config @quangnmwork suggested or even use your Regex so that all numbers are covered:

import { extendTailwindMerge } from 'tailwind-merge'

const fontSizeRegex = /^(\d+(\.\d+)?)?(base)$/

const twMerge = extendTailwindMerge({
    extend: {
        classGroups: {
            'font-size': [{ text: [(value) => fontSizeRegex.test(value)] }]
        }
    }
})

[dcastil]

Also just heads up: The config in the parent comment is not entirely correct. It should be:

 export const twMergeCustom = extendTailwindMerge({
   override: {
     classGroups: {
-      'font-size': ['1.5sm', '1.5base', '1.5lg'],
+      'font-size': [{ text: ['1.5sm', '1.5base', '1.5lg'] }],
-      'text-color': ['blue-500'],
+      'text-color': ['text-blue-500'],
     },
   },
 })