React组件包中TailwindCSS类覆盖问题及前缀适配方案咨询

针对你遇到的带前缀Tailwind类无法被twMerge正确合并的问题，最成熟的方案是利用tailwind-merge官方提供的自定义配置能力，让它识别你的组件前缀fr-，这样就能自动处理带前缀和不带前缀的冲突类。

修改你的cn工具函数 #

直接通过twMerge.create()创建一个带自定义前缀配置的合并函数，替换原来的默认twMerge：

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

// 创建带自定义前缀的twMerge实例
const customTwMerge = twMerge.create({
  prefix: 'fr-'
} satisfies Config)

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

原理说明 #

配置前缀后，twMerge会将组件内部的fr-bg-blue-500这类带前缀的类，和外部传入的bg-blue-500视为同一组冲突类，按照「外部传入类优先级高于组件内置类」的规则进行合并，完美解决之前的覆盖问题。

为什么不推荐硬编码过滤？ #

硬编码前缀会带来维护负担：如果后续需要修改组件的Tailwind前缀，你得同步修改工具函数里的过滤逻辑；而使用官方配置方案完全贴合tailwind-merge的设计逻辑，不仅更可靠，也更易维护。

内容的提问来源于stack exchange，提问作者Salvador Bacci