TW Classed

Monorepo of the TW Classed project. Consists of Core and React packages.

Full Documentation

React

The react package is a wrapper around the core package that provides an easy to way to create classed components. See the React Docs

1// Button.tsx
2import { classed } from "@tw-classed/react";
3
4const Button = classed.button("px-4 py-2", {
5  variants: {
6    color: {
7      primary: "bg-blue-500 text-white",
8      secondary: "bg-gray-500 text-white",
9    },
10  },
11});
12
13// In your App
14
15const App = () => {
16  return (
17    <>
18      <Button color="primary">Primary</Button>
19      <Button color="secondary">Secondary</Button>
20    </>
21  );
22};

Core

The core package is a library that provides a set of functions to help you build your own classed components.

See the Core Docs

1import { classed } from "@tw-classed/core";
2
3const button = classed("px-4 py-2", {
4  variants: {
5    color: {
6      primary: "bg-blue-500 text-white",
7      secondary: "bg-gray-500 text-white",
8    },
9  },
10});
11
12// In your template
13const Button = document.createElement("button");
14Button.className = button({ color: "primary" });
15
16// Or with a framework (Like lit-html)
17const Button = () => html`<button class="${button({ color: "primary" })}" />`;

License

MIT

Discord community