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