Using Tailwind Merge outside of NextUI components

[ampossardt]

Hi, I was hoping I could get some insight into how to configure tailwind merge for an application that uses NextUI, but for outside of NextUI components. For context - I am building a UI library that will be privately hosted for use with multiple different applications, so there are components that we have that either extend NextUI components, style them, or are unrelated to them, but may just use Tailwind for styling.

I'm attempting to get Tailwind Merge working appropriately with the semantic NextUI classes but it seems like I can't get them to resolve properly. I know there's additional configuration to do since NextUI generates classes, but I'm not having any luck with what i've tried.

Here's what I've tried to set up so far:

const twMerge = extendTailwindMerge({
  theme: {
    colors: ['default'],
    fontSize: [
      tiny', 'small', 'medium', 'large'
    ]
  }
})

Unfortunately, I don't get the class name resolution that I'm hoping for - text-default-500 still gets overridden if i add text-small. Is there a configuration or helper function that the library exports that can get me the same setup as what NextUI is using to do its merging? If not, is there an example of how to set up the configuration that I can use to build my own config?