Variants

变体允许您为同一个组件创建多个版本。

添加变体

您可以使用 variants 键来添加变体。可以添加的变体数量没有限制。

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: 'font-semibold text-white text-sm py-1 px-4 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700'
    }
  }
});
 
button({ color: 'secondary' });
/**
 * 结果:
 * font-semibold text-white text-sm py-1 px-4 rounded-full active:opacity-80 bg-purple-500
 * hover:bg-purple-700
 */

您也可以将值用作数组，例如：base: ['font-semibold', 'text-white', ...]

多重变体

您可以为一个组件添加多个变体。

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: 'font-semibold text-white py-1 px-3 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700'
    },
    size: {
      sm: 'py-1 px-3 text-xs',
      md: 'py-1.5 px-4 text-sm',
      lg: 'py-2 px-6 text-md'
    }
  }
});
 
button({ color: 'primary', size: 'sm' });
/**
 * 结果:
 * font-semibold text-white rounded-full active:opacity-80 bg-blue-500 hover:bg-blue-700
 * py-1 px-3 text-xs
 */
 
button({ color: 'secondary', size: 'md' });
/**
 * 结果:
 * font-semibold text-white rounded-full active:opacity-80 bg-purple-500 hover:bg-purple-700
 * py-1.5 px-4 text-sm
 */
 
button({ color: 'success', size: 'lg' });
/**
 * 结果:
 * font-semibold text-white rounded-full active:opacity-80 bg-green-500 hover:bg-green-700
 * py-2 px-6 text-md
 */

布尔变体

您还可以为组件添加布尔变体。这在您想要添加状态变体（例如 disabled）时非常有用。

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: 'font-semibold text-white text-sm py-1 px-4 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700'
    },
    disabled: {
      true: 'opacity-50 bg-gray-500 pointer-events-none'
    }
  }
});
 
button({ color: 'secondary', disabled: true });
/**
 * 结果:
 * font-semibold text-white text-sm py-1 px-4 rounded-full active:opacity-80
 * hover:bg-purple-700 bg-gray-500 opacity-50 cursor-not-allowed pointer-events-none
 */

复合变体

有时您可能想添加一个依赖于另一个变体的变体。例如，您可能希望添加一个依赖于 disabled 变体的 color 变体。这可以通过使用 compoundVariants 键来实现。

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: 'font-semibold text-white text-sm py-1 px-4 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700'
    },
    disabled: {
      true: 'opacity-50 bg-gray-500 pointer-events-none'
    }
  },
  compoundVariants: [
    {
      color: 'success',
      disabled: true,
      class: 'bg-green-100 text-green-700 dark:text-green-800' // 您也可以使用 "className"
    }
  ]
});
 
button({ color: 'success', disabled: true });
/**
 * 结果:
 * font-semibold text-sm py-1 px-4 rounded-full active:opacity-80 hover:bg-green-700
 * opacity-50 pointer-events-none bg-green-100 text-green-700 dark:text-green-800
 */

请注意，compoundVariants 键值是一个数组。

您还可以同时定位多个变体。

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: 'font-semibold text-white text-md py-1.5 px-4 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700'
    },
    disabled: {
      true: 'opacity-50 bg-gray-500 pointer-events-none'
    }
  },
  compoundVariants: [
    {
      color: 'success',
      disabled: true,
      class: 'bg-green-100 text-green-700 dark:text-green-800'
    },
    {
      color: ['primary', 'secondary'],
      disabled: true,
      class: 'text-slate-400 bg-slate-200 dark:bg-slate-800 opacity-100'
    }
  ]
});
 
button({ color: 'primary', disabled: true });
/**
 * 结果:
 * font-semibold text-md py-1.5 px-4 rounded-full active:opacity-80 hover:bg-blue-700
 * pointer-events-none text-slate-400 bg-slate-200 dark:bg-slate-800 opacity-100
 */
 
button({ color: 'secondary', disabled: true });
/**
 * 结果:
 * font-semibold text-md py-1.5 px-4 rounded-full active:opacity-80 hover:bg-purple-700
 * pointer-events-none text-slate-400 bg-slate-200 dark:bg-slate-800 opacity-100
 */

默认变体

您还可以为组件添加默认变体。这在您希望为组件添加预定义的变体值时非常有用。

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: 'font-semibold text-white py-1 px-3 rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 hover:bg-blue-700',
      secondary: 'bg-purple-500 hover:bg-purple-700',
      success: 'bg-green-500 hover:bg-green-700'
    },
    size: {
      sm: 'py-1 px-3 text-sm',
      md: 'py-1.5 px-4 text-md',
      lg: 'py-2 px-6 text-lg'
    }
  },
  defaultVariants: {
    color: 'primary',
    size: 'md'
  }
});
 
button();
/**
 * 结果:
 *
 * font-semibold text-white rounded-full active:opacity-80 bg-blue-500 hover:bg-blue-700
 * py-1 px-3 text-sm
 */

比较

Slots