Lzh on GitHub

以下是 tailwind-variants 导出的类型和函数的 API 参考。

import { tv } from 'tailwind-variants'
 
const element = tv(options, config)
 
// 调用 element 函数以获取类名
 
element({'...'}) // => string
 
// 调用带插槽的 element 函数以获取类名
 
const { slot1, slot2 } = element({...}) // => Record<Function, Function>
 
slot1({}) // => string
 
// 访问返回的对象
 
element.base // => string
element.slots // => Record<string, string>
element.variants // => Record<string, string>
element.variantKeys // => string[]
element.defaultVariants // => Record<string, string>
element.compoundVariants // => Array<Record<string, string>>
element.compoundSlots // => Array<Record<string, string>>

选项（Options）

options 参数是一个具有以下属性的对象：

type TVOptions = {
  extend?: TVReturnType | undefined;
  base?: ClassValue;
  slots?: Record<string, ClassValue>;
  variants?: Record<string, Record<string, ClassValue>>;
  defaultVariants?: Record<string, ClassValue>;
  compoundVariants?: Array<Record<string, string> & ClassProp>;
  compoundSlots?: Array<Record<string, string> & ClassProp>;
};
  • extend
    • 描述：此属性允许您从另一个组件扩展 base 样式、slots、variants、defaultVariants 和 compoundVariants。
    • 类型：TVReturnType | undefined
    • 默认值：undefined
    • 要了解有关组件组合的更多信息，请查看此页面。
  • base
    • 描述：此属性允许您定义组件的基本样式。
    • 类型：ClassValue
    • 默认值：undefined
  • slots
    • 描述：此属性允许您定义组件的插槽。
    • 类型：Record<string, ClassValue> | undefined
    • 默认值：{}
    • 要了解有关插槽及其用法的更多信息，请查看 Slots 页面。
  • variants
    • 描述：此属性允许您定义组件的变体。
    • 类型：Record<string, Record<string, ClassValue>> | undefined
    • 默认值：{}
    • 要了解有关变体及其用法的更多信息，请查看 Variants 页面。
  • defaultVariants
    • 描述：此属性允许您定义组件的默认变体。
    • 类型：Record<string, ClassValue> | undefined
    • 默认值：{}
    • 要了解有关默认变体及其用法的更多信息，请查看 Default Variants 页面。
  • compoundVariants
    • 描述：此属性允许您定义组件的复合变体。
    • 类型：Array<Record<string, string> & ClassProp> | undefined
    • 默认值：[]
    • 要了解有关复合变体及其用法的更多信息，请查看 Compound Variants 页面。
  • compoundSlots
    • 描述：此属性允许您定义组件的复合插槽。
    • 类型：Array<Record<string, string> & ClassProp> | undefined
    • 默认值：[]
    • 要了解有关复合插槽及其用法的更多信息，请查看 Compound Slots 页面。

配置（可选）

config 参数是一个具有以下属性的对象：

type TvConfig = {
  twMerge?: boolean;
  twMergeConfig?: TwMergeConfig;
};
  • twMerge
    • 描述：是否使用 tailwind-merge 库合并类名。它避免了重复的 tailwind 类。（推荐）更多信息请查看此处。
    • 类型：boolean
    • 默认值：true
  • twMergeConfig
    • 描述：tailwind-merge 库的配置对象。更多信息请查看此处。
    • 类型：TwMergeConfig
    • 默认值：{}

类型

  • ClassValue
    type ClassValue = string | string[] | null | undefined | ClassValue[];
  • ClassProp
    type ClassProp<V extends unknown = ClassValue> =
  | {
      class: V;
      className?: never;
    }
  | { class?: never; className: V }
  | { class?: never; className?: never };
  • TVReturnType
    type TVReturnType = {
  base?: string;
  extend?: TVReturnType;
  slots?: Record<string, string>;
  variants?: Record<string, string>;
  variantKeys?: string[];
  defaultVariants?: Record<string, string>;
  compoundVariants?: Array<Record<string, string>>;
};