Tailwind Variance Authority

An extremely powerful, simple, Tailwind Variant library.

Usage

import { ElementProps, tprops, tvary } from "twva"

const TEXT_WHITE = "text-white"
const TEXT_GRAY = "text-gray-700"

const COLOR = {
  // string value
  red: "bg-red-500",
  green: "bg-green-500",
  blue: "bg-blue-500",
  // array of string value
  black: ["bg-black", TEXT_WHITE],
  white: ["bg-white", TEXT_GRAY],
}

function Button({
  color,
  square = false,
  ...props
}: ElementProps<"button"> & { color: keyof typeof COLOR; square?: boolean }) {
  return (
    <button
      {...tprops(
        props,
        "px-3 py-2",
        tvary(COLOR, color),
        tvary(
          {
            false: "rounded",
          },
          square
        )
      )}
    />
  )
}

export default function Example() {
  return (
    <div className="max-w-5xl mt-8 mx-auto">
      <h1 className="mb-4">Buttons</h1>
      <div className="flex space-x-2 mb-2">
        <Button color="red">Red</Button>
        <Button color="green">Green</Button>
        <Button color="blue">Blue</Button>
        <Button color="black">Black</Button>
        <Button color="white">White</Button>
      </div>
      <div className="flex space-x-2 mb-2">
        <Button color="red" square>
          Red
        </Button>
        <Button color="green" square>
          Green
        </Button>
        <Button color="blue" square>
          Blue
        </Button>
        <Button color="black" square>
          Black
        </Button>
        <Button color="white" square>
          White
        </Button>
      </div>
    </div>
  )
}