tw-classed - GitLite

KO | EN

gitlite — search

#javascript #python #react #typescript #llm #go #golang #android #rust #linux #awesome #security #pytorch #open-source

tw-classed

(★ 527)

No description available.

File Explorer

Download Latest Version (.zip)

- config.json
- README.md
- - bug_report.md
  - feature_request.md
- - release-canary.yml
  - release.yml
- FUNDING.yml
- settings.json
- - .eslintrc.json
  - .gitignore
  - next.config.js
  - package.json
  - postcss.config.js
  - README.md
  - tailwind.config.js
  - tsconfig.json
- - .gitignore
  - biome.json
  - next.config.mjs
  - package.json
  - postcss.config.mjs
  - README.md
  - source.config.ts
  - tsconfig.json
- - .gitignore
  - .npmignore
  - CHANGELOG.md
  - package.json
  - readme.md
  - tsconfig.json
  - tsconfig.tsbuildinfo
  - vite.config.ts
  - yarn-error.log
- - CHANGELOG.md
  - env.d.ts
  - package.json
  - readme.md
  - tsconfig.json
  - tsconfig.test.json
  - tsconfig.tsbuildinfo
  - vite.config.ts
.eslintrc.js
.gitignore
biome.json
CLAUDE.md
LICENSE
MIGRATION.md
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
release-summary.md
rome.json
turbo.json
tw-classed.jpg

# Installation Guide

1. Get the code

git clone https://github.com/sannajammeh/tw-classed

Downloads the entire project code from GitHub to your computer.

cd tw-classed

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

cd apps/benchmark

This project's files live in a subfolder, so move into it first.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![tw-classed](https://raw.githubusercontent.com/sannajammeh/tw-classed/master/tw-classed.jpg)

# 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 (
    <>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
    </>
  );
};
```

## 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`<button class="${button({ color: "primary" })}" />`;
```

## License

MIT

#### Discord community
![Discord Banner 2](https://discordapp.com/api/guilds/1049812722319118416/widget.png?style=banner2)