The power of Tailwind combined with a first-class variant API.

• First-class variant API
• Responsive variants
• Slots support
• Composition support
• Fully typed
• Framework agnostic
• Automatic conflict resolution

For full documentation, visit tailwind-variants.org

1. Installation: To use Tailwind Variants in your project, you can install it as a dependency:

yarn add tailwind-variants # or npm i tailwind-variants

2. Usage:

import { tv } from 'tailwind-variants'; const button = tv({ base: "font-medium bg-blue-500 text-white rounded-full active:opacity-80", variants: { color: { primary: "bg-blue-500 text-white", secondary: "bg-purple-500 text-white", }, size: { sm: "text-sm", md: "text-base", lg: "px-4 py-3 text-lg", }, }, compoundVariants: [ { size: ["sm", "md"], class: "px-3 py-1", }, ], defaultVariants: { size: "md", color: "primary", } }); return ( <button className={button({ size: 'sm', color: 'secondary' })}>Click me</button> )

3. Responsive variants configuration (optional): If you want to use responsive variants you need to add the Tailwind Variants wrapper to your TailwindCSS config file tailwind.config.js.

// tailwind.config.js const { withTV } = require('tailwind-variants/transformer') /** @type {import('tailwindcss').Config} */ module.exports = withTV({ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {}, }, plugins: [], })

• cva (Joe Bell) 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 and contributors you guys rock! 🤘 - we recommend to use cva if don't need any of the Tailwind Variants features listed here.

• Stitches (Modulz)
  The pioneers of the variants API movement. Inmense thanks to Modulz for their work on Stitches and the community around it. 🙏

We're excited to see the community adopt NextUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!

• Discord
• Twitter
• GitHub Discussions

Contributions are always welcome!

Please follow our contributing guidelines.

Please adhere to this project's CODE_OF_CONDUCT.

• Junior garcia (@jrgarciadev)
• Tianen Pang (@tianenpang)

Licensed under the MIT License.

See LICENSE for more information.