@derozn/tailwind-variants

tailwind-variants

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

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

If you're using a custom path to import Tailwind variants, such as creating a custom tv instance with createTV, it's recommended to include this path in the transformer configuration:

// 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: [],
  },
  {
    aliases: ["@/lib/tv"],
  },
);

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!

• Discord
• Twitter
• GitHub Discussions

Contributing

Contributions are always welcome!

Please follow our contributing guidelines.

Please adhere to this project's CODE_OF_CONDUCT.

Authors

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

License

Licensed under the MIT License.

See LICENSE for more information.