custom border widths not correctly merged

[christian-reichart]

Hey there,
first of all: great tool! Really digging it, it's super helpful! Thank you for developing this!

I found a bug that revolves around border-width, but this may also affect other classes.

I have defined custom border widths as such:

    borderWidth: {
      0: '0',
      DEFAULT: '3px',
      lg: '6px',
    },

Now when I use border-lg border-white in my twMerge, the border-lg get's stripped away. I think it's misinterpreting border-lg as a color variant.

Would be great if you could look into this.

It works with border border-white and also if I rename lg to a number, so e.g. border-6 border-white.

[dcastil]

Hey @christian-reichart! 👋

Did you add the new border width to the tailwind-merge config? By default tailwind-merge only accepts numerical border width classes. Anything else (like border-foo) is identified as a border color in tailwind-merge, which in turn is in conflict with border-white.

You basically need this config:

const twMerge = extendTailwindMerge({
    theme: {
        borderWidth: ['lg']
    }
})

[christian-reichart]

I'm sorry I think I didn't read that part of the documentation. Will try that out that should fix it. You wouldn't by chance know where to best put this in a Remix.run project?

[dcastil]

No worries! ❤️

I'm not 100% familiar with Remix, but I'd put it into a utils folder, like app/utils/tailwind-merge.ts with following content:

export const twMerge = extendTailwindMerge({
    theme: {
        borderWidth: ['lg']
    }
})

Then you can import it anywhere in your Remix app with this line

import { twMerge } from '~/utils/tailwind-merge'

In case you're using ESLint, I find this rule helpful not to accidentally auto-import the global twMerge function.

"no-restricted-imports": [
    "error",
    {
        "paths": [
            {
                "importNames": ["twMerge"],
                "name": "tailwind-merge",
                "message": "Please import { twMerge } from '~/utils/tailwind-merge'."
            }
        ]
    }
]

[christian-reichart]

@dcastil Perfect thanks so much!

[mhsfh]

Hello everyone, i m sharing this maybe it will be helpful for someone,
i created this function to use them object in tailwind.config.js and it suppose to help in extendTailwindMerge
@dcastil what do you think about it ? it's valid ?

const { theme } = require('./tailwind.config');

const themConfiguration = (theme: typeof tailwindConfig.theme) => {
  const config = {};
  Object.entries(theme).forEach(([sectionsKey, section]) => {
    config[sectionsKey] = [];
    Object.entries(section).forEach(([propertyKey, property]) => {
      if (typeof property === 'string' || Array.isArray(property)) {
        config[sectionsKey].push(propertyKey);
      } else if (typeof property === 'object') {
        Object.entries(property).forEach(([variantKey]) => {
          const variant =
            variantKey.toLowerCase() === 'default' ? '' : `-${variantKey}`;
          config[sectionsKey].push(propertyKey + variant);
        });
      }
    });
  });
console.log(themConfiguration(theme));

---

usage

const twMerge = extendTailwindMerge({
  theme: themConfiguration(tailwindConfig.theme),
});

[dcastil]

Hey @mhsfh! I think this is not a good idea since tailwind-merge doesn't support all theme keys of Tailwind CSS. You can read more about it here: https://github.com/dcastil/tailwind-merge/blob/v1.8.1/docs/configuration.md#theme