Custom tailwind utilities and colors are not applying in a monorepo setting

[dragos-cojocaru]

What version of Tailwind CSS are you using?

v4.0.2

What build tool (or framework if it abstracts the build tool) are you using?

"next": "15.5.0",
"@tailwindcss/postcss": "^4.1.12",

What version of Node.js are you using?

For example: v22.15.0

What browser are you using?

Chrome, always latest version

What operating system are you using?

Windows

Reproduction URL

https://github.com/dragos-cojocaru/tailwind-bug

https://tailwind-bug-web.vercel.app/

Describe your issue

When adding @utility class and custom colors (--color-indigo: var(--indigo);) to the packages/ui/src/styles/globals.css, using these in packages/ui/src/components/button.tsx, and importing the Button in the apps/web/app/page.tsx, the new styles will not apply even though I am using the variant which has these styles.

I actually have a real project where I managed to be able to use either an @utility class or custom color. If I am using both of them on the same element, the @utility class causes the custom color to not apply unless added as !important (! prefix to the tailwind class name). I need the apps/web/app/globals.css because I extend it with classes only used in the web app.

With the reproduction code I fastly set up, these utilities are not working at all, unless applied with ! prefix (only sometimes) or used directly in apps/web/app/page.tsx through the className prop of the <Button component.

[wongjn]

In packages/ui/src/components/button.tsx line 13, you have:

default:
  "… text-indigo … text-primary-foreground …",

Notice how you have two classes that apply color. On line 53, you then pass the result of this cva function through cn() which uses tailwind-merge.

Since text-primary-foreground appears after text-indigo, text-indigo is removed from the class names rendered on the element. Generally, you only want one class name per element for the same variant (in this case, no variants) regardless if you are using tailwind-merge or not.

So, if you want the text color value in the default CVA variant to be text-indigo, remove text-primary-foreground:

--- a/packages/ui/src/components/button.tsx
+++ b/packages/ui/src/components/button.tsx
@@ -10,7 +10,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-indigo text-h10 text-primary-foreground shadow-xs hover:bg-primary/90",
+          "bg-primary text-indigo text-h10 shadow-xs hover:bg-primary/90",
         destructive:
           "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:

Though you may notice that this still doesn't make the text the indigo color and the text-indigo class name is still not present. This is again due to another aspect of tailwind-merge. It does not "know" that text-indigo for a text color and that text-h10 is for a text size. This is because these are custom tokens. It assumes that both of these are text colors and thus preserves text-h10 only. To fix this, you will want to look at configuring these tokens in tailwind-merge:

--- a/packages/ui/src/lib/utils.ts
+++ b/packages/ui/src/lib/utils.ts
@@ -1,5 +1,21 @@
 import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { extendTailwindMerge } from "tailwind-merge"
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      color: [
+        'indigo',
+        'primary-foreground',
+        // Add any more text-<color> tokens here.
+      ],
+      text: [
+        'h10',
+        // Add any more text-<font-size> tokens here.
+      ],
+    },
+  },
+})
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))

[dragos-cojocaru]

Thanks for you help. I appreciate it. 💖