react-twc

TWC creates reusable React + Tailwind CSS components in one line

Features

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

Documentation

Visit our official documentation.

Usage

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`;

Contributing

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

Want to help improve the docs?

The docsite lives in the monorepo.

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

Support

Having trouble? Ping me on X

Acknowledgement

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

• styled-components - where it all started

License

MIT License © 2023-Present Greg Bergé