Lzh on GitHub

Tailwind Variants 结合了 TailwindCSS 的强大功能和一流的变体 API。

设置 TailwindCSS

Tailwind Variants 要求您的项目中已安装 TailwindCSS。如果您尚未安装 TailwindCSS，可以按照 TailwindCSS 安装指南 进行操作。

安装

要在您的项目中使用 Tailwind Variants，您可以将其作为依赖项进行安装：

npm install tailwind-variants

可选：安装 tailwind-merge

从 v2 开始，tailwind-merge 是一个可选的对等依赖项。如果您想要 Tailwind CSS 类的自动冲突解决（推荐），请单独安装它：

npm install tailwind-merge
如果您不安装 tailwind-merge，您仍然可以使用 Tailwind Variants，但需要在您的配置中设置 twMerge: false 以禁用冲突解决。

用法

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>
);

IntelliSense 设置（可选）

要为 Tailwind Variants 启用自动完成功能，您可以按照以下说明进行操作。

如果您使用的是 VSCode 和 TailwindCSS IntelliSense 扩展，您必须将以下内容添加到您的 settings.json 文件中。

{
  "tailwindCSS.experimental.classRegex": [
    ["([\"'`][^\"'`]*.*?[\"'`])", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

Prettier 插件设置（可选）

如果您正在使用 prettier-plugin-tailwindcss 来对您的类名进行排序，您可以将 tv 添加到应该排序的函数列表中。

module.exports = {
  plugins: [require('prettier-plugin-tailwindcss')],
  tailwindFunctions: ['tv']
};

贡献

我们始终欢迎对 Tailwind Variants 的 PR，请参阅我们的 贡献指南（在新标签页中打开），了解如何为本项目做出贡献。