Classes conflicts with my component package

[baccci]

Hey! I've recently uploaded my first React component package to NPM. I wanted to make its styles extendable, so the users could override the default styles with their own, like NextUI.

The first problem I encountered was, when I installed the component, the classes I added weren't working. After I took a look in the inspector, I noticed that the added classes were actually compiled, but less specific than the ones precompiled in the component.
I was using tailwind-merge to address this, but for some reason it wasn't working. Then, I could notice that the precompiled classes in the package were being loaded in a style tag, while the new classes I was adding appeared to load dynamically in CSS chunks. (I don't know if this is actually relevant or not).

So, trying to address the issue, I added a prefix in the Tailwind configuration file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'fr-', // prefix for the generated classes to avoid conflicts
  // ...
}

I added the prefix config to my utility function for tailwind-merge too:

import { type ClassValue, clsx } from 'clsx'
import { extendTailwindMerge } from 'tailwind-merge'

const twMerge = extendTailwindMerge({
  prefix: 'fr-' // needs to be the same as in the tailwind.config.js
})

/**
 * Merge conflicting tailwind classes
 * @param inputs
 * @returns
 */
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

I then manually added the prefix to each of the classes in the component. Sadly this didn't work.

What I'm doing wrong? Thanks in advance for helping!

My NPM package repository: fractionalrange