tailwind类名覆盖是css层叠规则所致，后声明的类（如text-blue-400）覆盖先声明的（如text-red-500）；tailwind-merge通过运行时语义合并解决冲突，保留最右有效类，适用于动态拼接、组件封装等场景。
为什么直接写多个Tailwind类名会覆盖失败
React组件里写 className="text-red-500 text-blue-400"，最终只生效 text-blue-400 —— 这不是Tailwind的bug，而是CSS层叠规则在起作用：后声明的类定义覆盖前一个。Tailwind生成的CSS是按工具类顺序全局注入的，text-blue-400 的CSS规则在源码中排在 text-red-500 后面，所以必然胜出。你没法靠“写得晚”来控制优先级，因为所有类都在同一层级。
tailwind-merge 能解决什么具体问题
它不改CSS，也不加!important，而是运行时对传入的类名字符串做语义合并：识别冲突类（比如多个文字颜色、多个flex方向），保留“最右边”的那个，丢掉左边被覆盖的。适合这些场景：
- 组件接收
classNameprop，内部又拼接默认样式，容易产生冲突 - 用条件表达式动态拼接类名，比如
{isPrimary ? 'bg-blue-500' : 'bg-gray-300'} text-white，但又想确保text-white不被外部传入的text-black覆盖 - UI库封装原子组件（Button、Card），需要安全地融合用户传入的样式和内置样式
怎么正确接入 tailwind-merge
别直接替换 className，要包裹调用。常见错误是只在根元素用，漏掉子元素或条件分支。
- 安装：
npm install tailwind-merge - 基础用法：用
twMerge()替代字符串拼接，例如className={twMerge('p-4', isLarge && 'p-6', userClass)} - 注意：
twMerge()接收任意数量参数，但只处理字符串；null/undefined会被跳过，布尔值false也会被过滤，但true会转成字符串"true"（应避免） - 如果项目用了Prettier，建议关掉
prettier-plugin-tailwindcss的自动排序，它可能把类名重排导致twMerge判断逻辑错乱
哪些情况 tailwind-merge 压根不处理
它只管Tailwind官方支持的工具类，对自定义类、CSS-in-JS、内联style、@layer定义的类完全无感。
- 自定义的
btn-primary类？不识别，原样透传 -
md:text-lg sm:text-base这种响应式变体？能识别并合并，但要求你已启用Tailwind的响应式前缀（默认开启） -
hover:bg-red-500 focus:outline-none？支持伪类前缀，但仅限Tailwind内置的那些（hover/focus/active等），自己写的group-data-[open]:block需要额外配置extend规则 - 性能上，
twMerge是纯函数，无副作用，但在高频渲染组件（如列表项）里反复调用仍建议 useMemo 缓存结果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
