tailwind-merge

tailwind-merge 是一个用于处理和优化 Tailwind CSS 类的工具，它的主要功能是合并和去除冗余或冲突的 CSS 类。

我们平常在使用 Tailwind CSS 时，有时会出现重复或冲突的类名，特别是在动态应用类时，手动管理这些类可能会变得很复杂。

tailwind-merge 可以帮助自动化这一过程，确保最终应用的 CSS 类是唯一且不会发生冲突。

tailwind-merge 是完全运行时的方案，在运行时进行处理，而 tailwindcss 是编译时

使用场景

1. 动态类名：当你在 JavaScript 或 React 等框架中动态生成类名时，tailwind-merge 可以帮助你合并和优化这些类名，避免冗余或冲突。
2. 条件类名：在基于某些条件添加 CSS 类时，tailwind-merge 确保条件类之间不会发生冲突，比如在响应式设计中或主题切换时。
3. 开发效率：开发人员可以节省大量的时间，不必手动检查和优化 Tailwind CSS 类的组合，确保样式一致且符合预期。

它特别适合你开发组件的时候，对原有组件的 class 进行覆盖，所以像 shadcn/ui 这种 UI 库 直接把它作为了直接依赖。

H5 使用方式

import { twMerge } from 'tailwind-merge'

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hover:bg-dark-red p-3 bg-[#B91C1C]'

小程序中的使用方式

@weapp-tailwindcss/merge 是一个 tailwind-merge 的小程序版本，需要和 weapp-tailwindcss 一起使用

其中 weapp-tailwindcss 为 @weapp-tailwindcss/merge 提供编译时支持。

安装

npm

npm i @weapp-tailwindcss/merge

Yarn

yarn add @weapp-tailwindcss/merge

pnpm

pnpm add @weapp-tailwindcss/merge

使用方式

使用方式和 tailwind-merge 几乎完全相同

import { twMerge } from '@weapp-tailwindcss/merge'

twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')
// → 'hovercbg-dark-red p-3 bg-_hB91C1C_'

从 @weapp-tailwindcss/merge 导出的方法和 tailwind-merge 相同

另外目前编译时是以调用方法的名称作为寻址索引的，如果你需要方法重命名，

比如把 twMerge -> cn，需要设置这个 ignoreCallExpressionIdentifiers 配置项

特性

@weapp-tailwindcss/merge 内置了 tailwind-merge@2(对应 tailwindcss@3) 和 tailwind-merge@3(对应 tailwindcss@4) 2 个版本，

在安装的时候，根据你的 tailwindcss 版本自动进行切换。

如果你需要手动指定，你可以从下列路径中导出

// tailwindcss v3
import { twMerge } from '@weapp-tailwindcss/merge/v3'
// tailwindcss v4
import { twMerge } from '@weapp-tailwindcss/merge/v4'

另外 @weapp-tailwindcss/merge 还内置了 cva 功能 (class-variance-authority)

import { cva } from '@weapp-tailwindcss/merge/cva'

假如你熟悉原子类组件封装，你就知道这是什么了。

跨多端使用

import { create } from '@weapp-tailwindcss/merge';

const { twMerge } = create(
  {
    // 在当前环境为只有小程序的环境的时候，需要转义，其他就禁止
    disableEscape: true
  }
)

const x = twMerge('px-2 py-1 bg-red hover:bg-dark-red', 'p-3 bg-[#B91C1C]')

实时编辑器

function () {
  return <MergeDemo/>
}

结果

Loading...