tv

Install the following dependencies:

npm install tailwind-variants

Include the cn utility by referring to the cn page to set it up before adding tv.

Create a utils/tv.ts file and paste the following code into it.

import { createTV } from 'tailwind-variants';
 
import { twMergeConfig } from '@/utils/cn';
 
export type { VariantProps, ClassValue } from 'tailwind-variants';
 
export const tv = createTV({
  twMergeConfig,
});

IntelliSense setup (optional)

If you are using VSCode and the TailwindCSS IntelliSense Extension, you have to add the following to your .vscode/settings.json file to enable Intellisense features for cn, cnExt and tv functions.

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

Prettier setup (optional)

If you're using prettier-plugin-tailwindcss, you can include tv in the functions list to ensure it gets sorted as well.

const config = {
  // ...
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindFunctions: ['tv'],
};
 
export default config;