Core
Introduction

Core

@tw-classed/core is a framework agonistic library that provides a set of utilities to build a classed component. Under the hood @tw-classed/react uses @tw-classed/core to parse the variants and generate the class names.

Installation

pnpm add @tw-classed/core

Usage

import { classed } from "@tw-classed/core";
 
const button = classed("flex items-center", {
  variants: {
    size: {
      sm: "px-2 py-1 text-sm",
      md: "px-4 py-2 text-base",
      lg: "px-6 py-3 text-lg",
    },
    color: {
      blue: "bg-blue-300",
      red: "bg-red-300",
    },
  },
  defaultVariants: {
    size: "md",
    color: "blue",
  },
});

In your template

const Button = document.createElement("button");
Button.className = button({ size: "lg", color: "red" });
 
Button.textContent = "Click me";
document.body.appendChild(Button);

Typescript & Editor support

The library is written in typescript and provides types for all the functions and options.

Getting variants

import { classed, VariantProps } from "@tw-classed/core";
 
const button = classed("flex items-center", {
  variants: {
    size: {
      1: "px-2 py-1 text-sm",
      2: "px-4 py-2 text-base",
      3: "px-6 py-3 text-lg",
    },
    color: {
      blue: "bg-blue-300",
      red: "bg-red-300",
    },
  },
});
 
type ButtonVariants = VariantProps<typeof button>;
// ButtonVariants = { size?: "1" | "2" | "3"; color?: "blue" | "red" }

React Typescript guide

Changelog