The empowerment 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

To get started with Tailwind Variants, follow these simple steps:

1. Installation

To use Tailwind Variants in your project, install it as a dependency:

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

2. Usage

Here’s how you can implement Tailwind Variants using an analogy of crafting a personalized pizza:

Imagine you have a pizza base that you can customize with a variety of toppings! Each ingredient represents a specific style used in your design.

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 Click me;

In this example, the base of your pizza is the button style, while the variants are like the additional toppings that can change its flavor (color, size). Just like you can swap out toppings, you can adjust styles using the button’s variants. And just like some pizzas are served with default toppings, your button can also have default styles!

3. Responsive Variants Configuration (Optional)

If you want to use responsive variants, add the Tailwind Variants wrapper to your TailwindCSS config file:

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, include this path in the transformer configuration as well:

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

Troubleshooting

When working with Tailwind Variants, you may face a few common issues:

• Installation Errors: Ensure that Node.js and npm are up to date, as older versions might lead to compatibility issues.
• Configuration Issues: Double-check your `tailwind.config.js` for typos or incorrect paths when specifying content locations.
• Styling Problems: If the styles don’t appear as expected, make sure the Tailwind Variants plugin is enabled and correctly imported in your project.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Acknowledgements

This project started as an extension of Joe Bell’s work on cva – a great tool for generating variants for a single element with Tailwind CSS. Big thank you to Joe Bell and all the contributors!

Contributing

Contributions are always welcome! Please follow our contributing guidelines and 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.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.