How to extend theme with TwMerge in Tailwind v4

[JacobArrow]

How do I do this in Tailwind v4 without the config.js file?

import { type ClassValue, clsx } from "clsx"
import { extendTailwindMerge } from "tailwind-merge"

import { extendedTheme } from "@/tailwind.config"

const customTwMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      "font-size": [
        {
          text: Object.keys(extendedTheme.fontSize),
        },
      ],
    },
  },
})

export function cn(...inputs: ClassValue[]) {
  return customTwMerge(clsx(inputs))
}

[dcastil]

Hey @JacobArrow! 👋

I know it is repetitive, but I think the best way to do it is to just hardcode the font sizes into the tailwind-merge config, possibly using validators.

E.g. if you're using a number scale like --text-1, --text-2, etc. you can just use a config like this:

import { extendTailwindMerge, validators } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
    override: {
        theme: {
            text: [validators.isNumber],
        },
    },
})

Then you don't need to touch the tailwind-merge config if you add more font-size variables that are essentially just new numbers on the scale.

If you use specific names that don't match any validator, e.g. --text-tiny, --text-small, etc., add all of them to the theme:

import { extendTailwindMerge, validators } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
    override: {
        theme: {
            text: ['tiny', 'small', 'medium', 'large', 'huge'],
        },
    },
})