API

The nuts and bolts of TWClassed's API.

classed

A function to create a component including its classes and variants. It receives:

• element: the type of the component. Can be a string (div) or a React component (Link).
• classes (object or string or ClassedComponentType): as many string's or variant config objects as you want.

const Button = classed("button", {
    base: "" // base classes,
    variants: {
        color: {
            // color variants
        }
    }
})
 
// Use it
() => <Button />
() => <Button color="some-color" />

createClassed

A function to create the classed component (if you want custom configuration). It receives:

• config: the configuration object.

type Merger = (...args: string[]) => string;
 
createClassed({
  merger: Merger, // The merger function to use when computing all the classes.
});

The createClassed function returns an object with the following properties:

• classed: the classed function.

See the Configuring Classed Guide for more information on createClassed

getVariantConfig()

A function to get the variant config for a given component. It receives:

• component: the component to get the variant config for.

const Button = classed("button", {
  variants: {
    color: {
      blue: "bg-blue-500",
    },
  },
});
 
const { variants } = getVariantConfig(Button);
variants.color.blue; // "bg-blue-500"