tailwind-variants
Compose Tailwind CSS classes conditionally with a variant-first composition API.
Styling and CSS npm MIT
Used in agent projects
53
0.4% of 12,697 public repos built with AI coding agents
Rank in styling and css
#7 of 15
by use in those projects
Downloads
4.3M
npm, last 7 days, tailwind-variants
GitHub stars
3,318
last push Sep 10, 2026
How tailwind-variants is used
tailwind-variants is a dependency in 53 of the 12,697 public GitHub projects set up for AI coding agents that we scanned (0.4%), #7 of 15 in styling and css. The most used alternative there is Tailwind CSS. Projects that use it most often also use clsx (88.7%), Tailwind Merge (83.0%), Tailwind CSS (100.0%).
Often used with tailwind-variants
| clsx | 88.7% of tailwind-variants projects · 5.0× more than average |
|---|---|
| Tailwind Merge | 83.0% of tailwind-variants projects · 4.9× more than average |
| Tailwind CSS | 100.0% of tailwind-variants projects · 2.9× more than average |
| tw-animate-css | 49.1% of tailwind-variants projects · 7.3× more than average |
| ESLint | 83.0% of tailwind-variants projects · 2.2× more than average |
| Prettier | 56.6% of tailwind-variants projects · 3.2× more than average |
| TypeScript | 100.0% of tailwind-variants projects · 1.8× more than average |
| @internationalized/date | 43.4% of tailwind-variants projects · 137.8× more than average |
By coding agent
| GitHub Copilot | 0.9% of projects set up for it |
|---|---|
| Claude Code | 0.7% of projects set up for it |
| Cursor | 0.8% of projects set up for it |
Share of public repos configured for each agent that list tailwind-variants as a dependency.
Install
| Package | npm install tailwind-variants |
|---|---|
| Main stacks | TypeScript / JavaScript (28), Next.js (25) |
| Example projects | n00ki/sveltekit-omakase, GeekLad/meteora-profit-analysis, stickerdaniel/notion-avatar-svelte, wesselgrift/sveltekit-spa, thorstenalpers/CleanMyPosts |
Alternatives to tailwind-variants
| Tool | Used in agent projects | Downloads / wk | GitHub stars | License |
|---|---|---|---|---|
| Tailwind CSS npm Utility-first CSS framework for building custom user interfaces rapidly. |
4,410 (34.7%) | 134M | 97.9K | MIT |
| Tailwind Merge npm Merge Tailwind CSS classes intelligently without style conflicts. |
2,136 (16.8%) | 85.8M | 5,695 | MIT |
| Emotion npm CSS-in-JS library for styling React components with scoped styles and theming. |
332 (2.6%) | 20.2M | 18K | MIT |
| Sass npm CSS preprocessor adding variables, nesting and mixins to stylesheets. |
233 (1.8%) | 30.9M | 4,230 | MIT |
| styled-components npm CSS-in-JS library for styling React components with dynamic scoped styles. |
154 (1.2%) | 10.8M | 41.1K | MIT |
| react-responsive npm React library for implementing responsive design with CSS media queries. |
54 (0.4%) | 1.4M | 7,182 | MIT |
| postcss-import npm PostCSS plugin to inline @import rules before other transformations. |
46 (0.4%) | 41M | 1,409 | MIT |
| NativeWind npm Use Tailwind CSS in cross-platform React Native applications. |
45 (0.4%) | 1.9M | 8,106 | MIT |