Introduction
TW-Classed is a lightweight performance Tailwind CSS utility library for React. It's aimed at taking full advantage of Tailwind CSS's powerful utility classes, and provide excellent DX at the same time. The re-usability & DX of CSS in JS combined with the power of Tailwind's static extraction.
Key Features
Reusability
TW-Classed was designed to be reusable. Create classed components, extend them, or even extend custom react components with className. No more wrapping "reusable" components in a forwardRef or writing complicated logic to handle props & dynamic class names, TW-Classed handles this out of the box.
Variants
TW-Classed uses a Stitches.js inspired variants API, so you can design composable component APIs with ease.
You can define a single variant, multiple variants and default variants.
Developer Experience
One of the main goals of TW-Classed is to provide a developer experience that is as close to the excellent Stitches.js library as possible. TW-Classed provides a fully typed API, so when using TypeScript, variants and jsx element props will be inferred and auto-completed for you.
Also when using the as prop, the suggestions will update.
Credits
Special thanks to WorkOS for their hard work on Stitches.js which inspired the API of this library.