twMerge only works when hardcoding values in the same project?

[arkmech]

My tailwind-config library exports cn utility.

twMergeClassGroups.ts

export const fontSize = {
    'display-lg': [
       '4rem',
       {
          lineHeight: '70px',
          fontWeight: '300',
       }
    ]
}

export const textColor = {
    primary: 'black'
}

cn.ts

import { clsx, type ClassValue } from 'clsx';
import { extendTailwindMerge } from 'tailwind-merge';
import { fontSize, textColor } from './twMergeClassGroups';

const twMerge = extendTailwindMerge({
  extend: {
    classGroups: {
      'font-size': Object.keys(twMergeFontSize).map(key=> `text-${key}`),
      'text-color': Object.keys(twMergeTextColor).map(key=> `text-${key}`),
    },
  }
})

export function cn(...input: ClassValue[]) {
   return twMerge(clsx(inputs));
}

• My ui library, then uses the cn from tailwind-config library.
• My app then uses the the components from ui library.
• This method is about having twMerge all configured, so user can just use cn
  This did not work, I thought twMerge couldn't be exported as a library, but you will see below, any part of twMerge that comes from a library will not work, including the objects that that you keys from.

What I tried next, I had the cn.ts in the ui library directly and was only importing the fontSize and textColor from tailwind-config. This also did not work.

The main goal here is to have tailwind-config be the single source of truth.

The one thing that did work? Duplicating the twMergeClassGroups to be used directly in ui, but now have two sources of truth...

Is there something obvious, I'm missing? In the fact twMerge can't be used with libraries? If I really want a single source of truth, that means I need to combine my tailwind-config and ui library in a single package for this to work?

Error: Dynamic require of tty is not supported.
node_modules/picocolors/picocolors.js
node_modules/tailwindcss/lib/util/log.js
node_modules/tailwindcss/lib/public/colors.js

It looks like a tailwindcss error, but if twMerge is removed, app not longer crashes.

[dcastil]

Hey @arkmech! 👋

tailwind-merge should work in the browser, Node.js, Deno, etc., so should also work as part of a library.

Seems like you have an issue in your bundler or whatever is managing your module imports. tailwind-merge doesn't have anything to do with tty or picocolors, so the error probably originates elsewhere.