Supercharge
React + Tailwind CSS

TWC is a lightweight library to create Tailwind CSS Components in one line, write less code and build faster.

Get started with TWC
Turn this React component:
import * as React from "react";
import clsx from "clsx";
 
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}
  />
));
Into a single line:
import { twc } from "react-twc";
 
const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;

Features

With just one single line of code, you can create a reusable component with all these amazing features out-of-the-box:

  • ⚡️ Lightweight — only 0.49kb
  • ✨ Autocompletion in all editors
  • 🎨 Adapt the style based on props
  • ♻️ Reuse classes with asChild prop
  • 🦄 Work with all components
  • 😎 Compatible with React Server Components
  • 🚀 First-class tailwind-merge and cva support

Get started with TWC →