ClazzX | /src/clazzx.ts | clazzx@1.0.0

class ClazzX

import { ClazzX } from "https://deno.land/x/clazzx@1.0.0/src/clazzx.ts";

Inherit ClazzX and define your own base, default, compounds, and classes. Compose them by calling the static compose method. Access the classes by calling the static get method.

Examples

Example 1

class Btn extends ClazzX {
  base = "text-3xl font-bold";
  small = "text-sm";
}
const classes = Btn.compose({ small: true });

Example 2

class Input extends Btn {
  base = "text-3xl font-bold";
  error = "text-red-500"
  compounds = [{
    states: ["small", "error"],
    classes: "hover:bg-red-200",
  }]
}
const classes = Input.compose({ small: true, error: true });

Properties

base: Clx

compounds: Array<{ states: Array<string>; classes: Clx; }>

default: Clx

Methods

classes(input?: StyleProps<this>): string

Static Properties

clx

Static Methods

compose<C extends ClazzX>(this: new (...args: unknown[]) => C, classes: StyleProps<C>)

get<C extends ClazzX>(this: new (...args: unknown[]) => C)