twMerge only works when hardcoding values in the same project? #429

arkmech · 2024-06-15T06:08:49Z

arkmech
Jun 15, 2024

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 · 2024-06-21T15:27:52Z

dcastil
Jun 21, 2024
Maintainer

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.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

twMerge only works when hardcoding values in the same project? #429

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

twMerge only works when hardcoding values in the same project? #429

Uh oh!

Uh oh!

arkmech Jun 15, 2024

Replies: 1 comment

Uh oh!

Uh oh!

dcastil Jun 21, 2024 Maintainer

arkmech
Jun 15, 2024

dcastil
Jun 21, 2024
Maintainer