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
andcva
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é