https://github.com/sannajammeh/tw-classed
https://github.com/sannajammeh/tw-classed
components css-in-js css-in-ts react reactjs tailwind
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/sannajammeh/tw-classed
- Owner: sannajammeh
- License: mit
- Created: 2022-05-27T22:28:11.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-12-09T21:16:29.000Z (6 months ago)
- Last Synced: 2025-05-11T22:09:00.106Z (about 1 month ago)
- Topics: components, css-in-js, css-in-ts, react, reactjs, tailwind
- Language: TypeScript
- Homepage: https://tw-classed.vercel.app
- Size: 186 MB
- Stars: 526
- Watchers: 2
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-typesafe - sannajammeh/tw-classed - Make your Tailwind components re-usable. (**1. Libraries** / Styles)
README
# TW Classed
Monorepo of the TW Classed project. Consists of Core and React packages.
[Full Documentation](https://tw-classed.vercel.app)
## React
The react package is a wrapper around the core package that provides an easy to way to create classed components. See the [React Docs](https://tw-classed.vercel.app)
```tsx
// Button.tsx
import { classed } from "@tw-classed/react";
const Button = classed.button("px-4 py-2", {
variants: {
color: {
primary: "bg-blue-500 text-white",
secondary: "bg-gray-500 text-white",
},
},
});
// In your App
const App = () => {
return (
<>
Primary
Secondary
>
);
};
```
## Core
The core package is a library that provides a set of functions to help you build your own classed components.
See the [Core Docs](https://tw-classed.vercel.app/core/Introduction)
```ts
import { classed } from "@tw-classed/core";
const button = classed("px-4 py-2", {
variants: {
color: {
primary: "bg-blue-500 text-white",
secondary: "bg-gray-500 text-white",
},
},
});
// In your template
const Button = document.createElement("button");
Button.className = button({ color: "primary" });
// Or with a framework (Like lit-html)
const Button = () => html``;
```
## License
MIT
#### Discord community
