A Stitches & Styled-Components inspired library to create reusable Tailwind react components
npm install @tw-classed/coreA Stitches & Styled-Components inspired library to create reusable Tailwind based components, fully typed with polymorphic as prop, media queries and interaction support.
See the documentation for more information.
``bash`
npm i @tw-classed/core
`js
import { classed } from "@tw-classed/core";
const button = classed("bg-blue-500 py-2 px-4");
// In your favorite DOM library
() => html;`
##### Multiple argument support
Quickly sort out your classes by logic
`js`
const button = classed(
"bg-blue-500 py-2 px-4",
"hover:bg-blue-600",
"focus:outline-none"
);
##### Using Variants
`js
const button = classed("bg-blue-500", "hover:bg-blue-600", {
variants: {
size: {
sm: "py-1 px-2",
lg: "py-3 px-5",
},
},
});
// In your favorite DOM library
() => html;`
This library uses pnpm as package manager, Vitest for testing, tsc as compiler and Typescript ^4.7.0 as type checker. Please make sure to use the latest versions of these tools.
1. Fork this library
2. Create a new branch for your changes. Preferably
3. Run
4. Once you're happy with your changes, run
5. Make sure coverage is acceptable by running
6. Commit your changes and push them to your new branch
7. Create a pull request and await review