TWC creates reusable React + Tailwind CSS components in one line

• ⚡️ 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

Visit our official documentation.

Without twc:

import * as React from "react";

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}
  />
));

With twc:

import { twc } from "react-twc";

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

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

The docsite lives in the monorepo.

If you're interested in contributing to the documentation, check out the contributing guide.

Having trouble? Ping me on X

The development of TWC was only possible due to the inspiration and ideas from these amazing projects.

• styled-components - where it all started

MIT License © 2023-Present Greg Bergé