https://github.com/gregberge/twc

Create reusable React + Tailwind CSS components in one line ✨
https://github.com/gregberge/twc

react styled-components tailwindcss

Last synced: 3 days ago
JSON representation

Create reusable React + Tailwind CSS components in one line ✨

• Host: GitHub
• URL: https://github.com/gregberge/twc
• Owner: gregberge
• License: mit
• Created: 2023-12-08T15:47:28.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-18T14:09:34.000Z (5 months ago)
• Last Synced: 2025-01-15T19:06:31.850Z (10 days ago)
• Topics: react, styled-components, tailwindcss
• Language: TypeScript
• Homepage: https://react-twc.vercel.app
• Size: 1.66 MB
• Stars: 1,366
• Watchers: 6
• Forks: 31
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• my-awesome-list - twc
• awesome-typesafe - gregberge/twc - Create reusable React + Tailwind components in one line. (**1. Libraries** / Styles)

README

        
![TWC — Supercharge React + Tailwind CSS](.github/assets/banner.png "TWC — Supercharge React + Tailwind CSS")



  


  TWC creates reusable React + Tailwind CSS components in one line

  





## Features

- ⚡️ Lightweight — only 0.49kb

- ✨ Autocompletion in all editors

- 🎨 Adapt the style based on props

- ♻️ Reuse classes with `asChild` prop

- 🦄 Work with all components

- 😎 Compatible with React Server Components

- 🚀 First-class `tailwind-merge` and `cva` support




## Documentation

Visit our [official documentation](https://react-twc.vercel.app).

## Usage

**Without `twc`:**

```tsx

import * as React from "react";

const Card = React.forwardRef<

  HTMLDivElement,

  React.HTMLAttributes

>(({ className, ...props }, ref) => (

  


));

```


**With `twc`:**

```tsx

import { twc } from "react-twc";

const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;

```

## Contributing

Feel like contributing? That's awesome! We have a

[contributing guide](https://github.com/gregberge/twc/blob/main/CONTRIBUTING.md) to help guide you.

### Want to help improve the docs?

The docsite lives in the [monorepo](./website/pages/docs/).

If you're interested in contributing to the documentation, check out the

[contributing guide](https://github.com/gregberge/twc/blob/main/CONTRIBUTING.md).

## Support

Having trouble? [Ping me on X](https://x.com/gregberge_)

## Acknowledgement

The development of TWC was only possible due to the inspiration and ideas from these amazing projects.

- [styled-components](https://styled-components.com) - where it all started

## License

MIT License © 2023-Present [Greg Bergé](https://github.com/gregberge)