Solid
Introduction

Solid

@tw-classed/solid is a library that allows you to create classed components in Solid.js. It has 1-1 API parity with @tw-classed/react, but with Solid specific internals. Follow the React guide to learn more about the API.

Installation

pnpm add @tw-classed/solid 

Usage

import { classed } from "@tw-classed/solid";
 
const Button = classed.button("flex items-center", {
  variants: {
    size: {
      1: "px-2 py-1 text-sm",
      2: "px-4 py-2 text-base",
      3: "px-6 py-3 text-lg",
    },
    color: {
      blue: "bg-blue-300",
      red: "bg-red-300",
    },
  },
});

In your App

() => (
  <Button size="2" color="blue" class="some-extra-classes..">
    Click me
  </Button>
);