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 許可證發布。

介紹

主要特色

變體

分享