How can I increase the priority of styles

[natamox]

<input class="flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 border border-input h-9 px-3 py-2 w-4" value="755px">

export const inputVariants = cva(
  'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
  {
    variants: {
      variant: {
        normal: 'border border-input',
        default: 'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
        ghost: 'border-none focus-visible:ring-transparent'
      },
      h: {
        sm: 'h-9 px-3 py-2',
        md: 'h-10 px-3 py-2'
      },
      w: {
        sm: 'w-4'
      }
    },
    defaultVariants: {
      variant: 'default',
      h: 'md'
    }
  }
);

I want w-4 to overwrite w-full.

Thanks

[carlosyan1807]

Its not a feature of class-variance-authority. cva can be used in various scenarios, so you might need tailwind-merge to handle potential class name conflicts in tailwindcss.

// ./lib/utils.ts
import { twMerge } from 'tailwind-merge'
import { clsx } from 'clsx'

import type { ClassValue } from 'clsx'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

vue sfc

<template>
  <input :class="cn(inputVariants({ w: 'sm' }))">
</template>

result <input class="...otherClasses w-4" />

If you're using cva@beta, you can use defineConfig to integrate twMerge. https://beta.cva.style/getting-started/installation#handling-style-conflicts