klass

npm install @klass/core

import { klass } from "@klass/core";

const button = klass({
  base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded tracking-wide transition duration-300 focus-visible:outline-none disabled:cursor-not-allowed disabled:shadow-none",
  variants: {
    color: {
      red: "bg-red-500 hover:bg-red-600 focus:bg-red-700 disabled:border-red-300 disabled:bg-red-300 text-white",
      green: "bg-green-500 hover:bg-green-600 focus:bg-green-700 disabled:border-green-300 disabled:bg-green-300 text-white",
      blue: "bg-blue-500 hover:bg-blue-600 focus:bg-blue-700 disabled:border-blue-300 disabled:bg-blue-300 text-white",
    },
    size: {
      sm: "h-10 px-4 text-sm font-medium",
      md: "h-11 px-5 text-base font-medium",
      lg: "h-12 px-6 text-lg font-bold",
    },
  },
  defaults: {
    color: "green",
    size: "md",
  },
});

import { reklass } from "@klass/core";

const box = reklass({
  conditions: [
    {
      base: "",
      sm: "sm:",
      md: "md:",
      lg: "lg:",
      xl: "xl:",
      xxl: "2xl:",
    },
    "base",
  ],
  variants: {
    m: {
      "1": "m-1",
      "2": "m-2",
      "3": "m-3",
      "4": "m-4",
      "5": "m-5",
    },
    mx: {
      "1": "mx-1",
      "2": "mx-2",
      "3": "mx-3",
      "4": "mx-4",
      "5": "mx-5",
    },
    my: {
      "1": "my-1",
      "2": "my-2",
      "3": "my-3",
      "4": "my-4",
      "5": "my-5",
    },
    p: {
      "1": "p-1",
      "2": "p-2",
      "3": "p-3",
      "4": "p-4",
      "5": "p-5",
    },
    px: {
      "1": "px-1",
      "2": "px-2",
      "3": "px-3",
      "4": "px-4",
      "5": "px-5",
    },
    py: {
      "1": "py-1",
      "2": "py-2",
      "3": "py-3",
      "4": "py-4",
      "5": "py-5",
    },
  },
});