!tw-classed

!npm !npm bundle size !NPM

tw-classed

A 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.

Installation

``bash
npm i @tw-classed/react
`

Usage

`tsx
// With tw-classed
import { classed } from "@tw-classed/react";
const Button = classed("button", "bg-blue-500 text-white p-4 rounded-md");

// Without tw-classed
import { forwardRef } from "react";
type ButtonProps = React.ButtonHTMLAttributes;

const Button = forwardRef(
({ className, children, ...props }, ref) => (
className="bg-blue-500 text-white p-4 rounded-md"
ref={ref}
{...props}
>
{children}

)
);
`

##### Multiple argument support

`tsx
// Grid.tsx
import { classed } from "@tw-classed/react";

const Grid = classed(
"div",
"grid-cols-1 gap-4",
"md:grid-cols-2",
"lg:grid-cols-3",
"xl:grid-cols-4"
);

export default Grid;
`

##### Using Variants

Insert an object as an argument to classed to define variants and defaultVariants for the component.
Later use the key i.e color prop to set the variant.

`tsx
// Button.tsx
import { classed } from "@tw-classed/react";

const Button = classed("button", "p-4 rounded-md", {
variants: {
color: {
blue: "bg-blue-500 text-white",
primary: "bg-indigo-500 text-white",
},
},
defaultVariants: {
color: "blue",
},
});

const MyApp = () => {
return (
<>
Im the primary color
Im the blue color
Im the default color (blue)

);
};
`

##### Using the as prop

This allows for TypeScript intellisense to infer props based on the as prop.

`tsx
import { classed } from "@tw-classed/react";

const Button = classed("button", "bg-blue-500 text-white p-4 rounded-md");

const MyApp = () => {
return (

click me

);
};
`

Contributing

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 pnpm i
4. Once you're happy with your changes, run pnpm run test
5. Make sure coverage is acceptable by running pnpm run coverage`
6. Commit your changes and push them to your new branch
7. Create a pull request and await review