Make your Tailwind components
re-usable

Tailwind CSS and CSS-in-JS, the best of both worlds. Great DX and user experience right out of the gate.

Quick Start Github 
npm install @tw-classed/react

Fully typesafe, with automatic intellisense and variant inference.

Reusable

TW Classed lets you create reusable components in record time. No more `forwardRef` & Typescript interfaces

Extendable

Write your components in a modular way. Wrap them in a classed method and extend them with more styles

Variants

Add custom variants to have complete control over your component's look.

Tiny

Acheive excellent DX and performance with only ~0kb of code!

Stats

  • Bundle size ( core )0kb
  • Bundle size ( react )0kb
  • Variants∞
Variants

Turbocharge your development speed with variants

const Button = classed("button", {
    variants: {
        size: {
            sm: "text-sm",
            md: "text-md",
            lg: "text-lg",
        },
        color: {
            primary: "bg-blue-500",
            secondary: "bg-red-500",
        },
    },

    compoundVariants: [
        {
            size: "sm",
            color: "secondary",
            class: "px-2 py-1",
        },
        {
            size: "md",
            color: "secondary",
            class: "px-4 py-2",
        },
    ],

    defaultVariants: {
        size: "md",
        color: "primary",
    },
});
Composition

Style external components with ease.

// Link.tsx import Link from "next/link"; const ClassedLink = classed(Link, "text-blue-500 hover:text-blue-700"); // In your App () => <ClassedLink href="/docs">Go to docs</ClassedLink>;

Featured on

bytes-devbytes-dev