Lzh on GitHub

Tailwind Variants 有几种指定配置选项的方法：

  • 将配置传递给 tv 函数
  • 使用 createTV 创建自定义的 tv 实例
  • 修改 defaultConfig 变量

本地配置

最简单的配置 Tailwind Variants 的方法是使用 tv 函数的第二个参数。这将为特定的 tv 调用设置配置，对于一次性的配置更改非常有用。

tv(
  { base: '' },
  {
    twMerge: false
    // ...
  }
);

全局配置

如果您希望配置应用于所有 tv 的用法，可以修改 defaultConfig 变量，为所有 tv 调用设置全局配置。

import { defaultConfig } from 'tailwind-variants';
 
defaultConfig.twMerge = false;

自定义 tv 实例

如果您的不同用例有不同的配置，默认配置可能不适合您。在这种情况下，您可以使用 createTV 函数来创建一个具有指定配置的 tv 实例。

import { createTV } from 'tailwind-variants';
 
const tv = createTV({
  twMerge: false
  // ...
});
 
tv({ base: '' });

高级：自定义 tv 包装器

对于更高级的用例，您可以创建一个自定义的 tv 包装器，用您自己的自定义合并配置扩展默认配置：

// tv.ts
import type {TV} from "tailwind-variants";
import {tv as tvBase} from "tailwind-variants";
 
const COMMON_UNITS = ["small", "medium", "large"];
 
const twMergeConfig = {
  theme: {
    spacing: ["divider"],
    radius: COMMON_UNITS,
  },
  classGroups: {
    shadow: [{shadow: COMMON_UNITS}],
    opacity: [{opacity: ["disabled"]}],
    "font-size": [{text: ["tiny", ...COMMON_UNITS]}],
    "border-w": [{border: COMMON_UNITS}],
    "bg-image": [
      "bg-stripe-gradient-default",
      "bg-stripe-gradient-primary",
      "bg-stripe-gradient-secondary",
      "bg-stripe-gradient-success",
      "bg-stripe-gradient-warning",
      "bg-stripe-gradient-danger",
    ],
  },
};
 
export const tv: TV = (options, config) =>
  tvBase(options, {
    ...config,
    twMerge: config?.twMerge ?? true,
    twMergeConfig: {
      ...config?.twMergeConfig,
      theme: {
        ...config?.twMergeConfig?.theme,
        ...twMergeConfig.theme,
      },
      classGroups: {
        ...config?.twMergeConfig?.classGroups,
        ...twMergeConfig.classGroups,
      },
    },
  });

这种方法使您能够：

  • 用自定义主题值扩展默认的 tailwind-merge 配置。
  • 为您的设计系统添加自定义类组。
  • 使用 TV 类型保持类型安全。
  • 在保留其余配置的同时覆盖任何默认配置。

配置选项

type TvConfig = {
  twMerge?: boolean;
  twMergeConfig?: TwMergeConfig;
};

twMerge

描述：是否使用 tailwind-merge 库合并类名。它避免了重复的 tailwind 类。（推荐）更多信息请参见 此处。

注意：从 v2 开始，tailwind-merge 是一个可选的对等依赖项。如果您想使用此功能（默认启用），需要单独安装它。如果您不安装 tailwind-merge，则必须设置 twMerge: false。

  • 类型：boolean
  • 默认值：true

twMergeConfig

  • 描述：tailwind-merge 库的配置对象。更多信息请参见 此处。
  • 类型：TwMergeConfig
  • 默认值：{}