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

[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'],
     },
   },
 })

[otacleT]

Thank you for your response, @dcastil.
I completely understand 👍