twc

Create reusable React + Tailwind components in one line

TailwindCSSCSS in JSReact
gregberge/twcreact-twc.vercel.appreact-twc

README

twc


Features


- ⚡️ Lightweight — only 0.46kb
- ✨ 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:

  1. ```tsx
  2. import * as React from "react";

  4. const Card = React.forwardRef<
  5.   HTMLDivElement,
  6.   React.HTMLAttributes<HTMLDivElement>
  7. >(({ className, ...props }, ref) => (
  8.   <div
  9.     ref={ref}
  10.     className={clsx(
  11.       "rounded-lg border bg-slate-100 text-white shadow-sm",
  12.       className,
  13.     )}
  14.     {...props}
  15.   />
  16. ));
  17. ```

With twc:

  1. ```tsx
  2. import { twc } from "react-twc";

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

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é