Tailwind Variants · 开源

介绍

Tailwind Variants 是一个一流的变体API库，用于 TailwindCSS。

主要特性

变体

自从 Stitches 引入变体以来，我们就成了它们的忠实粉丝。它们是创建一致设计系统的绝佳方式，因此我们创建了 Tailwind Variants 将它们引入 TailwindCSS。

import { tv } from 'tailwind-variants';
 
const button = tv({
  base: 'font-medium bg-blue-500 text-white rounded-full active:opacity-80',
  variants: {
    color: {
      primary: 'bg-blue-500 text-white',
      secondary: 'bg-purple-500 text-white'
    },
    size: {
      sm: 'text-sm',
      md: 'text-base',
      lg: 'px-4 py-3 text-lg'
    }
  },
  compoundVariants: [
    {
      size: ['sm', 'md'],
      class: 'px-3 py-1'
    }
  ],
  defaultVariants: {
    size: 'md',
    color: 'primary'
  }
});
 
return (
  <button className={button({ size: 'sm', color: 'secondary' })}>
    Click me
  </button>
);

要了解更多关于变体的信息，请查看变体页面。

根据MIT许可证授权。

介绍

主要特性

变体

分享