Tailwind Variants

Установка

yarn add tailwind-variants

Настройки

./components/_variants/Button.tsx

import { tv, type VariantProps } from 'tailwind-variants'

export const button = tv({
  base: "py-1.5 px-4 rounded-full",
  variants: {
    color: {
      primary: "bg-blue-600 hover:bg-blue-700 text-white",
      secondary: "bg-yellow-400 hover:bg-yellow-500 text-black",
    },
    size: {
      sm: "py-1 px-3 text-xs",
      md: "py-1.5 px-4 text-sm",
      lg: "py-2 px-6 text-md",
    },
    flat: {
      true: "bg-transparent",
    },
  },
  defaultVariants: {
    color: "primary",
    size: "md"
  },
  compoundVariants: [
    {
      color: "primary",
      flat: true,
      class: "bg-blue-600/40",
    },
    {
      color: "secondary",
      flat: true,
      class: "bg-yellow-400/20",
    },
    { size: "sm" },
    { size: "md" },
    { size: "lg" }
  ],
});

/**
 * Result:
 * color?: "primary" | "secondary"
 * flat?: boolean
 * size?: "sm" | "md" | "lg"
 */

type ButtonVariants = VariantProps<typeof button>

interface ButtonProps extends ButtonVariants {
  button: React.ReactNode
}

export const Button = (props: ButtonProps) => {
  return <button className={button(props)}>{props.button}</button>;
};

Использование

import { Button } from "@/components/_variants/Button";

export default async function Button() {
  return (
    <div>
      <Button button='Текст кнопки' color='primary' size="lg" flat={false} />
      <Button button='Текст кнопки' color='secondary' size="md" flat={false} />
    </div>
  )
}

Polymorphic Components

./components/button.tsx

import { tv, type VariantProps } from "tailwind-variants";

export const button = tv({
  base: "py-1.5 px-4 rounded-full",
  variants: {
    color: {
      primary: "bg-blue-600 hover:bg-blue-700 text-white",
      secondary: "bg-yellow-400 hover:bg-yellow-500 text-black",
    },
    size: {
      sm: "py-1 px-3 text-xs",
      md: "py-1.5 px-4 text-sm",
      lg: "py-2 px-6 text-md",
    },
    flat: {
      true: "bg-transparent",
    },
  },
  defaultVariants: {
    color: "primary",
    size: "md",
  },
  compoundVariants: [
    {
      color: "primary",
      flat: true,
      class: "bg-blue-600/40",
    },
    {
      color: "secondary",
      flat: true,
      class: "bg-yellow-400/20",
    },
    { size: "sm" },
    { size: "md" },
    { size: "lg" },
  ],
});

/**
 * Result:
 * color?: "primary" | "secondary"
 * flat?: boolean
 * size?: "sm" | "md" | "lg"
 */

type ButtonVariants = VariantProps<typeof button>;

interface ButtonProps extends ButtonVariants {
  button: React.ReactNode;
  as?: any;
}

export const Button = ({ as, ...props }: ButtonProps) => {
  const Component = as || "button";
  return (
    <Component className={button(props)} {...props}>
      {props.button}
    </Component>
  );
};

export default Button;

./app/page.tsx

import Polymorphic from "@/components/button";

export default function Page() {
  return (
    <Button as='a' href="https://fubon.ru" target='_blank'>Polymorphic Сomponents</Button>
  )
}

Section

./components/section.tsx

import { tv, type VariantProps } from "tailwind-variants";

export const section = tv({
  base: "",
  variants: {
    color: {
      default: "bg-white",
      primary: "bg-gradient-to-br from-[#009CDE] from-50% to-[#006CB1] to-90%",
    },
    flat: {
      true: "bg-opacity-0",
    },
    container: {
      true: "container",
    },
  },
  defaultVariants: {
    color: "default",
  },
});

type SectionVariants = VariantProps<typeof section>;

interface SectionProps extends SectionVariants {
  children: React.ReactNode;
  id?: string;
  as?: any;
  className?: any;
}

export default function Section(props: SectionProps) {
  const { as, className } = props;
  const Component = as || "section";
  return (
    <Component id={props.id} className={`${section(props)} ${className}`}>
      {props.children}
    </Component>
  );
}