I’ve uploaded my first React component to NPM. It’s a slider with ticks (fractions) that you can drag.
Here’s the link: Fractional Range Slider NPM
I’ve made it up with TailwindCSS. When it is bundled, it generates all the classes being used. The first problem was that when the package was installed in a project, the prebundled classes overrided the new ones being generated in real time. I fixed it adding prefixes to the Tailwind configuration:
// tailwind.config.js
module.exports = {
content: ["./src/**/*.tsx"],
prefix: "fr-",
// ...
};
Though it has worked, now I have a new problem.
I use a utility function to deal with Tailwind classes conflicts in order to make the component extensible:
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
/**
* Merge conflicting tailwind classes
* @param inputs
* @returns
*/
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Since the Tailwind classes are different (the package ones have the prefix and the ones being passed not), the utility function no longer merge them and thus, the new classes that conflicts are overrided again.
Maybe hardcoding a filter with the prefix in the utility function could work before doing the checks, but, there is any proven or great solution to this?
Thanks in advance!
2
Answers
You need to make some changes as bellow:
Changes:
I think: