{"id":24460637,"url":"https://github.com/heroui-inc/tailwind-variants","last_synced_at":"2025-05-10T02:55:04.397Z","repository":{"id":65330546,"uuid":"588331095","full_name":"heroui-inc/tailwind-variants","owner":"heroui-inc","description":"🦄 Tailwindcss first-class variant API","archived":false,"fork":false,"pushed_at":"2025-03-08T16:19:53.000Z","size":385,"stargazers_count":2755,"open_issues_count":37,"forks_count":76,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-05-10T02:54:55.745Z","etag":null,"topics":["classnames","css","tailwindcss","variants"],"latest_commit_sha":null,"homepage":"https://tailwind-variants.org","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/heroui-inc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"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}},"created_at":"2023-01-12T21:42:24.000Z","updated_at":"2025-05-09T08:52:13.000Z","dependencies_parsed_at":"2023-10-16T03:29:40.644Z","dependency_job_id":"0fbdd369-20db-4576-81df-9c2322218bc5","html_url":"https://github.com/heroui-inc/tailwind-variants","commit_stats":{"total_commits":141,"total_committers":21,"mean_commits":6.714285714285714,"dds":"0.35460992907801414","last_synced_commit":"e312fef17537357c40726853db3f61320de0a09f"},"previous_names":["frontio-ai/tailwind-variants","heroui-inc/tailwind-variants","nextui-org/tailwind-variants"],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heroui-inc%2Ftailwind-variants","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heroui-inc%2Ftailwind-variants/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heroui-inc%2Ftailwind-variants/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heroui-inc%2Ftailwind-variants/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heroui-inc","download_url":"https://codeload.github.com/heroui-inc/tailwind-variants/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253356257,"owners_count":21895671,"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":["classnames","css","tailwindcss","variants"],"created_at":"2025-01-21T04:02:03.555Z","updated_at":"2025-05-10T02:55:04.370Z","avatar_url":"https://github.com/heroui-inc.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://tailwind-variants.org\"\u003e\n    \u003cimg width=\"20%\" src=\".github/assets/isotipo.png\" alt=\"tailwind-variants\" /\u003e\n    \u003ch1 align=\"center\"\u003etailwind-variants\u003c/h1\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  The \u003cem\u003epower\u003c/em\u003e of Tailwind combined with a \u003cem\u003efirst-class\u003c/em\u003e variant API.\u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://www.npmjs.com/package/tailwind-variants\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/tailwind-variants.svg?style=flat-round\" alt=\"npm downloads\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/tailwind-variants\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://badgen.net/npm/v/tailwind-variants\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/heroui-inc/tailwind-variants/blob/main/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/tailwind-variants?style=flat\" alt=\"License\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- First-class variant API\n- Slots support\n- Composition support\n- Fully typed\n- Framework agnostic\n- Automatic conflict resolution\n- Tailwindcss V4 support\n\n## Documentation\n\nFor full documentation, visit [tailwind-variants.org](https://tailwind-variants.org)\n\n\u003e ❕ Note: `Tailwindcss V4` no longer supports the `config.content.transform` so we remove the `responsive variants` feature\n\u003e\n\u003e If you want to use `responsive variants`, you need to add it manually to your classname.\n\n## Quick Start\n\n1. Installation:\n   To use Tailwind Variants in your project, you can install it as a dependency:\n\n```bash\nyarn add tailwind-variants\n# or\nnpm i tailwind-variants\n```\n\n2. Usage:\n\n```js\nimport {tv} from \"tailwind-variants\";\n\nconst button = tv({\n  base: \"font-medium bg-blue-500 text-white rounded-full active:opacity-80\",\n  variants: {\n    color: {\n      primary: \"bg-blue-500 text-white\",\n      secondary: \"bg-purple-500 text-white\",\n    },\n    size: {\n      sm: \"text-sm\",\n      md: \"text-base\",\n      lg: \"px-4 py-3 text-lg\",\n    },\n  },\n  compoundVariants: [\n    {\n      size: [\"sm\", \"md\"],\n      class: \"px-3 py-1\",\n    },\n  ],\n  defaultVariants: {\n    size: \"md\",\n    color: \"primary\",\n  },\n});\n\nreturn \u003cbutton className={button({size: \"sm\", color: \"secondary\"})}\u003eClick me\u003c/button\u003e;\n```\n\n## Acknowledgements\n\n- [**cva**](https://github.com/joe-bell/cva) ([Joe Bell](https://github.com/joe-bell))\n  This project as started as an extension of Joe's work on `cva` – a great tool for generating variants for a single element with Tailwind CSS. Big shoutout to [Joe Bell](https://github.com/joe-bell) and [contributors](https://github.com/joe-bell/cva/graphs/contributors) you guys rock! 🤘 - we recommend to use `cva` if don't need any of the **Tailwind Variants** features listed [here](https://www.tailwind-variants.org/docs/comparison).\n\n- [**Stitches**](https://stitches.dev/) ([Modulz](https://modulz.app))  \n  The pioneers of the `variants` API movement. Inmense thanks to [Modulz](https://modulz.app) for their work on Stitches and the community around it. 🙏\n\n## Community\n\nWe're excited to see the community adopt HeroUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!\n\n- [Discord](https://discord.gg/9b6yyZKmH4)\n- [Twitter](https://twitter.com/getnextui)\n- [GitHub Discussions](https://github.com/heroui-inc/tailwind-variants/discussions)\n\n## Contributing\n\nContributions are always welcome!\n\nPlease follow our [contributing guidelines](./CONTRIBUTING.md).\n\nPlease adhere to this project's [CODE_OF_CONDUCT](./CODE_OF_CONDUCT.md).\n\n## Authors\n\n- Junior garcia ([@jrgarciadev](https://github.com/jrgaciadev))\n- Tianen Pang ([@tianenpang](https://github.com/tianenpang))\n\n## License\n\nLicensed under the MIT License.\n\nSee [LICENSE](./LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheroui-inc%2Ftailwind-variants","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheroui-inc%2Ftailwind-variants","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheroui-inc%2Ftailwind-variants/lists"}