Tailwind

import { GetVariantProps, vs } from "@vtechguys/vs";
 
export const button = vs({
  // Tailwind rich classes
  base: ["font-semibold", "border", "rounded"],
  variants: {
    intent: {
      color: [
        "bg-blue-500",
        "text-white",
        "border-transparent",
        "hover:bg-blue-600"
      ],
    secondary: [
        "bg-white",
        "text-gray-800",
        "border-gray-400",
        "hover:bg-gray-100"
      ]
    },
    size: {
      small: ["text-sm", "py-1", "px-2"],
      medium: ["text-base", "py-2", "px-4"]
    }
  },
  defaultVariants: {
    intent: "primary",
    size: "medium"
  }
});
 
export type ButtonVariantProps = GetVariantProps<typeof button>;

import React from "react";
 
type ButtonOwnProps = {
    // ... some button props ...
};
 
type ButtonProps = React.PropsWithChildren<ButtonVariantProps & ButtonOwnProps>;
 
 
export function ButtonTailwind(props: ButtonProps) {
  const { color, size, children, ...rest } = props;
  
  // Tailwind classes 
  const variants = button({ color, size });
  const classes = clsx(variants);
 
  return (
    <button className={classes} {...rest}>
      {children}
    </button>
  );
}