Skip to content

sannajammeh/tw-classed

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
January 27, 2023 23:51
May 28, 2022 00:28
January 27, 2023 23:51
December 1, 2022 15:32
December 16, 2022 20:56
January 18, 2023 02:26
January 18, 2023 02:26

tw-classed

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

// 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>
    </>
  );
};

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

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" })}" />`;

License

MIT

Discord community

Discord Banner 2