@utility Custom Functional Utilities Not Generating Classes in Output CSS if use tailwind-merge / clsx

[selllami]

Hi,

I'm using Tailwind CSS v4+ (no tailwind.config.js) and trying to add custom functional utilities using the new @Utility directive in my CSS, as described in the official documentation

However, when I add classes like text-stroke-width-1px or text-stroke-color-white to my HTML, they do not appear in the generated CSS or in the rendered HTML

@utility text-stroke-width-* {
  -webkit-text-stroke-width: --value([length]);
}

@utility text-stroke-color-* {
  -webkit-text-stroke-color: --value([color]);
}

<span className="text-stroke-width-[1px] text-stroke-color-white">Test</span>

Thank you for your help!

[wongjn]

You'd need to change the color class name to arbitrary variant syntax because you've only defined arbitrary value class name candidates. Otherwise, they should work as evidenced in this Tailwind Play with could mean it is something particular to your project. Consider providing a git repo that reproduces the unexpected behavior.

[selllami]

Thank you for your help!

I found the exact issue: I’m using a custom cn() :

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

It turns out that twMerge can sometimes remove or not recognize custom utility classes generated with @utility, so the classes like text-stroke-width-[1px] were not being applied.
When I use plain className="text-stroke-width-[1px] " without cn() it works as expected.

So the problem was with my usage of cn() and not Tailwind itself.

Thanks again for pointing me in the right direction!