import { Tab, Tabs } from "nextra-theme-docs";

# Installation

<Tabs items={["pnpm", "npm", "yarn", "bun"]}>
  <Tab>

    ```sh
    pnpm i class-variance-authority
    ```

  </Tab>
  <Tab>

    ```sh
    npm i class-variance-authority
    ```

  </Tab>
  <Tab>
  
    ```sh
    yarn add class-variance-authority
    ```
  
  </Tab>
  <Tab>
    ```sh
    bun add class-variance-authority
    ```
  </Tab>
</Tabs>

<details>

<summary>Do I really have to write such a long package name?</summary>

Unfortunately, for a little bit longer, yes. Originally, the plan was to publish the package as `cva`, but this name [was taken and marked as a "placeholder"](https://www.npmjs.com/package/cva).

On 2022/02/16, GitHub transferred NPM ownership of `cva` to [Joe Bell](https://joebell.studio). This shorter name will be used from v1 onwards.

In the meantime, you can always alias the package for your convenience…

1. Alias the package with [`npm install`](https://docs.npmjs.com/cli/v6/commands/npm-install)

   ```sh
   npm i cva@npm:class-variance-authority
   ```

2. Then import like so:

   ```ts
   import { cva } from "cva";

   // …
   ```

</details>

## 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:

<Tabs items={["Visual Studio Code", "Neovim", "WebStorm"]}>
  <Tab>

    1. [Install the "Tailwind CSS IntelliSense" Visual Studio Code extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

    2. Add the following to your [`settings.json`](https://code.visualstudio.com/docs/getstarted/settings):

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

  </Tab>
  <Tab>

    1. [Install the extension](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#tailwindcss)

    2. Add the following configuration:

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

  </Tab>
  <Tab>

    1. Check the version. Available for [WebStorm 2023.1](https://www.jetbrains.com/webstorm/whatsnew/#version-2023-1-tailwind-css-configuration) and later

    2. Open the settings. Go to [Languages and Frameworks | Style Sheets | Tailwind CSS](https://www.jetbrains.com/help/webstorm/tailwind-css.html#ws_css_tailwind_configuration)

    3. Add the following to your tailwind configuration

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

  </Tab>
</Tabs>

### 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`](https://github.com/dcastil/tailwind-merge) package.

For bulletproof components, wrap your `cva` component with `twMerge`.

<details>

<summary>Example with tailwind-merge</summary>

```ts
import { cva, type VariantProps } from "class-variance-authority";
import { twMerge } from "tailwind-merge";

const buttonVariants = cva(["your", "base", "classes"], {
  variants: {
    intent: {
      primary: ["your", "primary", "classes"],
    },
  },
  defaultVariants: {
    intent: "primary",
  },
});

export interface ButtonVariants extends VariantProps<typeof buttonVariants> {}

export const button = (variants: ButtonVariants) =>
  twMerge(buttonVariants(variants));
```

</details>
