Support for `--border-width` namespace missing

[dcastil]

@dcastil, it seems like --border-width is still a supported namespace in Tailwind v4, albeit not properly documented:

Demo: https://play.tailwindcss.com/HmCHJ0cWwG

Implementation: https://github.com/tailwindlabs/tailwindcss/blob/79711678fac74f61aae17b25ce51b5f6c409bb31/packages/tailwindcss/src/utilities.ts#L2278

Do you reckon it might be possible to restore the equivalent functionality in tailwind-merge?

Originally posted by @dmitrc in #393 (comment)

[dcastil]

Looking further into this I realize now why I didn't add this initially. There are a lot of variables supported in Tailwind CSS, e.g. --outline-width-*, --ring-offset-width-*, --gradient-color-stop-positions-*, etc. I can't support them all because that would heavily increase the tailwind-merge bundle size. For this reason I only added the theme keys mentioned in https://tailwindcss.com/docs/theme#theme-variable-namespaces since they are the officially documented ones.

I can't add the --border-width-* theme scale since that would lead to an unclear set of supported themes. Sorry for the mixup @dmitrc!

I still recommend going with the approach to define custom scales in JS as shown in #393 (reply in thread). Then there is no extra config necessary for tailwind-merge.

Otherwise you can also define the theme in your own config like this:

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

// Define the custom theme group ID as a type
type AdditionalThemeGroupIds = 'border-width'

const themeBorderWidth = fromTheme<AdditionalThemeGroupIds>('border-width')

// Create a custom twMerge with a border-width theme scale
const twMerge = extendTailwindMerge<never, AdditionalThemeGroupIds>({
    extend: {
        // Define your custom border-width theme scale
        theme: {
            'border-width': ['thin', 'medium', 'thick'],
        },
        // Extend the border-w class groups to recognize your theme values
        classGroups: {
            'border-w': [{ border: [themeBorderWidth] }],
            'border-w-x': [{ 'border-x': [themeBorderWidth] }],
            'border-w-y': [{ 'border-y': [themeBorderWidth] }],
            'border-w-s': [{ 'border-s': [themeBorderWidth] }],
            'border-w-e': [{ 'border-e': [themeBorderWidth] }],
            'border-w-t': [{ 'border-t': [themeBorderWidth] }],
            'border-w-r': [{ 'border-r': [themeBorderWidth] }],
            'border-w-b': [{ 'border-b': [themeBorderWidth] }],
            'border-w-l': [{ 'border-l': [themeBorderWidth] }],
        },
    },
})

// Usage examples:
twMerge('border-2 border-thin')        // => 'border-thin'
twMerge('border-thin border-thick')    // => 'border-thick'
twMerge('border-t-2 border-t-medium')  // => 'border-t-medium'

[dcastil]

Closing this issue as not planned. Let me know in case I should reopen this.

[dmitrc]

That's totally understandable, thanks for the consideration!