{"id":13494653,"url":"https://github.com/gregberge/twc","last_synced_at":"2025-04-10T09:50:12.963Z","repository":{"id":213596730,"uuid":"729177626","full_name":"gregberge/twc","owner":"gregberge","description":"Create reusable React + Tailwind CSS components in one line ✨","archived":false,"fork":false,"pushed_at":"2024-08-18T14:09:34.000Z","size":1740,"stargazers_count":1389,"open_issues_count":2,"forks_count":32,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-03T05:08:50.276Z","etag":null,"topics":["react","styled-components","tailwindcss"],"latest_commit_sha":null,"homepage":"https://react-twc.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gregberge.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"gregberge"}},"created_at":"2023-12-08T15:47:28.000Z","updated_at":"2025-03-22T12:47:29.000Z","dependencies_parsed_at":"2024-01-29T08:10:26.098Z","dependency_job_id":"29d5e353-16b7-4de0-bd34-c4ddbc497a28","html_url":"https://github.com/gregberge/twc","commit_stats":null,"previous_names":["gregberge/twc"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Ftwc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Ftwc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Ftwc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gregberge%2Ftwc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gregberge","download_url":"https://codeload.github.com/gregberge/twc/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248197465,"owners_count":21063619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","styled-components","tailwindcss"],"created_at":"2024-07-31T19:01:26.884Z","updated_at":"2025-04-10T09:50:12.944Z","avatar_url":"https://github.com/gregberge.png","language":"TypeScript","readme":"![TWC — Supercharge React + Tailwind CSS](.github/assets/banner.png \"TWC — Supercharge React + Tailwind CSS\")\n\n\u003cp align=\"center\"\u003e\n  \u003cbr/\u003e\n  \u003ca href=\"https://react-twc.vercel.app\"\u003eTWC\u003c/a\u003e creates reusable React + Tailwind CSS components in one line\n  \u003cbr/\u003e\u003cbr/\u003e\n\u003c/p\u003e\n\n## Features\n\n- ⚡️ Lightweight — only 0.49kb\n- ✨ Autocompletion in all editors\n- 🎨 Adapt the style based on props\n- ♻️ Reuse classes with `asChild` prop\n- 🦄 Work with all components\n- 😎 Compatible with React Server Components\n- 🚀 First-class `tailwind-merge` and `cva` support\n\n\u003cbr/\u003e\n\n## Documentation\n\nVisit our [official documentation](https://react-twc.vercel.app).\n\n## Usage\n\n**Without `twc`:**\n\n```tsx\nimport * as React from \"react\";\n\nconst Card = React.forwardRef\u003c\n  HTMLDivElement,\n  React.HTMLAttributes\u003cHTMLDivElement\u003e\n\u003e(({ className, ...props }, ref) =\u003e (\n  \u003cdiv\n    ref={ref}\n    className={clsx(\n      \"rounded-lg border bg-slate-100 text-white shadow-sm\",\n      className,\n    )}\n    {...props}\n  /\u003e\n));\n```\n\n**With `twc`:**\n\n```tsx\nimport { twc } from \"react-twc\";\n\nconst Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;\n```\n\n## Contributing\n\nFeel like contributing? That's awesome! We have a\n[contributing guide](https://github.com/gregberge/twc/blob/main/CONTRIBUTING.md) to help guide you.\n\n### Want to help improve the docs?\n\nThe docsite lives in the [monorepo](./website/pages/docs/).\n\nIf you're interested in contributing to the documentation, check out the\n[contributing guide](https://github.com/gregberge/twc/blob/main/CONTRIBUTING.md).\n\n## Support\n\nHaving trouble? [Ping me on X](https://x.com/gregberge_)\n\n## Acknowledgement\n\nThe development of TWC was only possible due to the inspiration and ideas from these amazing projects.\n\n- [styled-components](https://styled-components.com) - where it all started\n\n## License\n\nMIT License © 2023-Present [Greg Bergé](https://github.com/gregberge)\n","funding_links":["https://github.com/sponsors/gregberge"],"categories":["TypeScript","**1. Libraries**"],"sub_categories":["Styles"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregberge%2Ftwc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgregberge%2Ftwc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgregberge%2Ftwc/lists"}