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:

``tsx import * as React from "react";

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

With twc:

`tsx import { twc } from "react-twc";

const Card = twc.divrounded-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.

$3

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