Introduction

Tailwind CSS is very productive and really easy to use with React. You can easily style elements by specifying a className attribute.

<div className="rounded-lg border bg-slate-100 text-white shadow-sm" />

...but creating reusable React components with Tailwind CSS is not trivial.

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={clsx(
      "rounded-lg border bg-slate-100 text-white shadow-sm",
      className,
    )}
    {...props}
  />
));

You end up writing lot of lines just to reuse some class names.

twc aims to make it easy and more productive, allowing you to focus on building UI instead of writing code.

const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;

Getting Started