\n\n## Features\n\n- First-class variant API\n- Slots support\n- Composition support\n- Fully typed\n- Framework agnostic\n- Built-in conflict resolution\n- Tailwind CSS v4 support\n\n## Installation\n\n```bash\nnpm i tailwind-variants\n# or\nyarn add tailwind-variants\n# or\npnpm add tailwind-variants\n```\n\n**Lite mode:** import from `tailwind-variants/lite` for a smaller bundle without conflict resolution.\n\n**Upgrading?**\n\n- v2 → v3: [migration guide](./.docs/migrations/v2-to-v3.md)\n- v1 → v2: [migration guide](./.docs/migrations/v1-to-v2.md)\n\n## Quick Start\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\nbutton({ size: \"sm\", color: \"secondary\" });\n// => \"font-medium rounded-full active:opacity-80 bg-purple-500 text-white text-sm px-3 py-1\"\n```\n\n> **Note:** Tailwind CSS v4 no longer supports `config.content.transform`, so responsive variants\n> were removed. Add responsive classes to your class names manually if needed.\n\n## Conflict Resolution\n\nConflict resolution is built into the default entry — no extra package is required. It is available\non `tv`, `createTV`, `cn`, and `cnMerge` (`cx` and `/lite` do not merge).\n\n```js\nimport { tv, cn } from \"tailwind-variants\";\n\ncn(\"px-2\", \"px-4\"); // => \"px-4\"\n\ntv({ base: \"px-2\", variants: { size: { lg: \"px-4\" } } })({ size: \"lg\" }); // => \"px-4\"\n```\n\n### Custom configuration\n\nPass `twMergeConfig` to teach the resolver about custom utilities. Prefer `{ extend, override }` —\n`extend` appends to the defaults, `override` replaces them:\n\n```ts\nimport { cnMerge, createTV, tv, type TWMergeConfig } from \"tailwind-variants\";\n\nconst twMergeConfig = {\n extend: {\n classGroups: {\n elevation: [\"elevation-low\", \"elevation-high\"],\n },\n },\n} satisfies TWMergeConfig;\n\ntv({ base: \"elevation-low\", variants: { raised: { true: \"elevation-high\" } } }, { twMergeConfig });\ncreateTV({ twMergeConfig });\ncnMerge(\"elevation-low\", \"elevation-high\")({ twMergeConfig }); // => \"elevation-high\"\n```\n\nDisable merging with `{ twMerge: false }` on `tv`, `createTV`, or `cnMerge`.\n\n### Reusing a `tailwind-merge` config\n\nIf you already configure `extendTailwindMerge`, reuse the same config object as `twMergeConfig`\n(pass the object — not the returned merge function):\n\n```ts\nimport { extendTailwindMerge } from \"tailwind-merge\";\nimport { createTV, type TWMergeConfig } from \"tailwind-variants\";\n\nconst mergeConfig = {\n extend: {\n classGroups: {\n elevation: [\"elevation-low\", \"elevation-high\"],\n },\n },\n} satisfies TWMergeConfig;\n\nextendTailwindMerge(mergeConfig);\ncreateTV({ twMergeConfig: mergeConfig });\n```\n\nFor `createTailwindMerge`, move the custom parts of the factory into `{ extend, override }` and pass\nthat object. Merge functions and full default configs cannot be passed directly.\n\n## Utility Functions\n\n| Function | Behavior |\n| --------- | ---------------------------------------------------- |\n| `cx` | Concatenate class names (no merging) |\n| `cn` | Concatenate and merge with the default config |\n| `cnMerge` | Concatenate and merge, with optional per-call config |\n\n```js\nimport { cx, cn, cnMerge } from \"tailwind-variants\";\n\ncx(\"px-2\", \"px-4\"); // => \"px-2 px-4\"\ncn(\"px-2\", \"px-4\"); // => \"px-4\"\ncnMerge(\"px-2\", \"px-4\")({ twMerge: false }); // => \"px-2 px-4\"\n```\n\n## Documentation\n\nFor full documentation, visit [tailwind-variants.org](https://tailwind-variants.org).\n\n## Acknowledgements\n\n- [**cva**](https://github.com/joe-bell/cva) ([Joe Bell](https://github.com/joe-bell))\n This project started as an extension of Joe's work on `cva` — a great tool for generating variants\n for a single element with Tailwind CSS. Big shoutout to [Joe Bell](https://github.com/joe-bell) and\n [contributors](https://github.com/joe-bell/cva/graphs/contributors)! If you don't need the\n **Tailwind Variants** features listed\n [here](https://www.tailwind-variants.org/docs/comparison), we recommend `cva`.\n\n- [**Stitches**](https://stitches.dev/) ([Modulz](https://modulz.app))\n The pioneers of the `variants` API movement. Immense thanks to [Modulz](https://modulz.app) for\n their work on Stitches and the community around it.\n\n- [**tailwind-merge**](https://github.com/dcastil/tailwind-merge), [**clsx**](https://github.com/lukeed/clsx), and [**cnfast**](https://github.com/aidenybai/cnfast)\n Conflict resolution draws on ideas and MIT-licensed work from these projects.\n\n## Community\n\nWe're excited to see the community adopt HeroUI, raise issues, and provide feedback. Whether it's a\nfeature 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\n- [Contributing guidelines](./CONTRIBUTING.md)\n- [Code of conduct](./CODE_OF_CONDUCT.md)\n- [Security policy](./SECURITY.md)\n\n## Authors\n\n- Junior Garcia ([@jrgarciadev](https://github.com/jrgarciadev))\n- Tianen Pang ([@tianenpang](https://github.com/tianenpang))\n\n## License\n\nLicensed under the MIT License. See [LICENSE](./LICENSE.md) for more information.\n","readmeFilename":"README.md"}
![\"tailwind-variants\"](\".github/assets/isotipo.png\")
\n ![\"npm](\"https://img.shields.io/npm/dm/tailwind-variants.svg?style=flat-round\")
\n \n \n ![\"License\"](\"https://img.shields.io/npm/l/tailwind-variants?style=flat\")