Monorepo of the TW Classed project. Consists of Core and React packages.
The react package is a wrapper around the core package that provides an easy to way to create classed components. See the React Docs
// Button.tsx
import { classed } from "@tw-classed/react";
const Button = classed.button("px-4 py-2", {
variants: {
color: {
primary: "bg-blue-500 text-white",
secondary: "bg-gray-500 text-white",
},
},
});
// In your App
const App = () => {
return (
<>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
</>
);
};The core package is a library that provides a set of functions to help you build your own classed components.
See the Core Docs
import { classed } from "@tw-classed/core";
const button = classed("px-4 py-2", {
variants: {
color: {
primary: "bg-blue-500 text-white",
secondary: "bg-gray-500 text-white",
},
},
});
// In your template
const Button = document.createElement("button");
Button.className = button({ color: "primary" });
// Or with a framework (Like lit-html)
const Button = () => html`<button class="${button({ color: "primary" })}" />`;MIT
