Installation

pnpm i cva@beta

npm i cva@beta

yarn add cva@beta

Tailwind CSS

If you’re a Tailwind user, here are some additional (optional) steps to get the most out of cva:

IntelliSense

You can enable autocompletion inside cva using the steps below:

Install the “Tailwind CSS IntelliSense” Visual Studio Code extension
Add the following to your settings.json:

{
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

Install the extension
Add the following configuration:

lspconfig.tailwindcss.setup({
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = {
          ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
          ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
        },
      },
    },
  },
})

Check the version. Available for WebStorm 2023.1 and later
Open the settings. Go to Languages and Frameworks | Style Sheets | Tailwind CSS
Add the following to your tailwind configuration

{
  "experimental": {
    "classRegex": ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  }
}

Handling Style Conflicts

Although cva’s API is designed to help you avoid styling conflicts, there’s still a small margin of error.

If you’re keen to lift that burden altogether, check out the wonderful tailwind-merge package.

For bulletproof components, extend cva with twMerge.

Example with tailwind-merge

import { defineConfig } from "cva";
import { twMerge } from "tailwind-merge";

export const { cva, cx, compose } = defineConfig({
  hooks: {
    onComplete: (className) => twMerge(className),
  },
});

import { cx, cva } from "../cva.config";

export const button = cva({
  // 1. `twMerge` strips out `bg-gray-200`…
  base: "font-semibold bg-gray-200 border rounded",
  variants: {
    // 2. …as variant `bg-*` values take precedence
    primary: "bg-blue-500 text-white border-transparent hover:bg-blue-600",
    secondary: "bg-white text-gray-800 border-gray-400 hover:bg-gray-100",
  },
  defaultVariants: {
    intent: "primary",
  },
});

button();
// => "font-semibold border rounded bg-blue-500 text-white border-transparent hover:bg-blue-600 text-base py-2 px-4 uppercase"

cx("bg-gray-200", "bg-blue-500");
// => "bg-blue-500"