tv

An instance of tailwind-variants with Tailwind v4 compatible class merging.

tailwind-variants

What Changed in Tailwind v4?

  • Simplified Configuration: Uses the streamlined cn utility instead of twMergeConfig
  • Better Integration: Direct integration with Tailwind v4's improved class conflict resolution
  • No Custom Config: Eliminates the need for complex tailwind-merge configuration

Installation

Install the following dependencies:

terminal
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.

/utils/tv.ts
import { createTV } from 'tailwind-variants';
 
import { cn } from '@/utils/cn';
 
export type { VariantProps, ClassValue } from 'tailwind-variants';
 
export const tv = createTV({
  twMerge: cn as any,
});

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 and tv functions.

.vscode/settings.json
"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.

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

Examples

For examples and detailed usage, refer to tailwind-variants documentation.

All you need to do here is use the tv function from @/utils/tv instead of tailwind-variants package.

import { tv } from '@/utils/tv';
© 2024 AlignUI Design System. All rights reserved.