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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) for their hard work on Stitches.js (opens in a new tab) which inspired the API of this library.