React 组件包中 TailwindCSS 类重写的问题

Question

我已将我的第一个 React 组件上传到 NPM。这是一个带有刻度（分数）的滑块，您可以拖动它。

这里是链接：分数范围滑块 NPM

我用 TailwindCSS 弥补了这一点。当它被捆绑时，它会生成所有正在使用的类。第一个问题是，当将包安装到项目中时，预捆绑的类会覆盖实时生成的新类。我修复了它，在 Tailwind 配置中添加了前缀：

// tailwind.config.js

module.exports = {
  content: ["./src/**/*.tsx"],
  prefix: "fr-",
  // ...
};

虽然有效，但现在我遇到了新问题。

我使用实用函数来处理 Tailwind 类冲突，以使组件可扩展：

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))
}

由于Tailwind类不同（包中的类有前缀，而传递的类没有），实用程序函数不再合并它们，因此，冲突的新类会再次被覆盖。

也许在进行检查之前对实用程序函数中的前缀进行硬编码过滤器可以工作，但是，有任何经过验证的或很好的解决方案吗？

提前致谢！

Answer 1

您需要进行以下一些更改：

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

const twMerge = extendTailwindMerge({
  prefix: "fr-", // need to be same as per tailwind.config.js
});

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

变化：

• 如果我们修改我们的

  tailwind.config.js

  ，那么我们还需要修改我们的

  twMerge config

您可以了解更多这里