Skip to content

heroui-inc/tailwind-variants

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f363575 Β· Jan 18, 2025
Nov 12, 2024
Nov 12, 2024
Mar 21, 2024
Jan 18, 2025
Nov 12, 2024
Jan 12, 2023
Jan 12, 2023
Mar 21, 2024
Jan 15, 2023
Nov 12, 2024
Nov 12, 2024
Nov 12, 2024
Jan 12, 2023
Jan 12, 2023
Jan 12, 2023
Mar 21, 2024
Jan 12, 2023
Jan 18, 2025
May 13, 2024
Feb 23, 2024
Jan 14, 2023
Nov 12, 2024
Jan 18, 2025
Nov 12, 2024
Jan 28, 2023
Jan 28, 2023
Oct 24, 2023

Repository files navigation

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

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 HeroUI, 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.