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 pnpm i
3. Run pnpm run test
4. Once you're happy with your changes, run pnpm run coverage`
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