GitHub
1.35k
Created 8 months ago, last commit 20 days ago
11 contributors
111 commits
Stars added on GitHub, month by month
9
10
11
12
1
2
3
4
5
6
7
8
2022
2023
Stars added on GitHub, per day, on average
Yesterday
+2
Last week
+2.3 /day
Last month
+2.8 /day
Package on NPM
Monthly downloads on NPM
9
10
11
12
1
2
3
4
5
6
7
8
2022
2023
README

tailwind-variants

tailwind-variants

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

npm downloads NPM Version License

Features

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

Documentation

For full documentation, visit tailwind-variants.org

Quick Start

  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
  1. 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>
)
  1. 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: [],
})

Acknowledgements

  • 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. 🙏

Community

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!

Contributing

Contributions are always welcome!

Please follow our contributing guidelines.

Please adhere to this project's CODE_OF_CONDUCT.

Authors

License

Licensed under the MIT License.

See LICENSE for more information.