Custom font-size and color conflict

[yasinitskyi]

What version of Tailwind CSS are you using?

"^4.1.9"

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

"next": "16.0.0"

What version of Node.js are you using?

For example: v22.0.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Describe your issue

Custom font-size defined in global.css with --text- conflicts with custom colors defined with --color-, the last one in layout will be applied:

1. text-xxs is applied and text-custom-accent-highlight entirely ignored, even won't appear in html tree.

'text-custom-accent-highlight text-xxs' 

2. text-custom-accent-highlight is applied and text-xxs entirely ignored, even won't appear in html tree.

'text-xxs text-custom-accent-highlight' 

global.css:

:root{...} .dark{...} @theme inline { --text-xxs: 0.688rem; --text-xxxs: 0.625rem; --color-custom-accent-highlight: var(--hotline-accent-highlight); } 

Outsmarting tailwind like this won't work either:

@layer utilities { .text-xxs { font-size: var(--text-xxs); } .text-xxxs { font-size: var(--text-xxxs); } } 

[wongjn]

Sounds like you might be using a package like tailwind-merge. If so, you should configure it so that it knows which theme tokens are for font-size and color. Otherwise consider providing a git repo that reproduces the unexpected behavior.

[yasinitskyi]

Thx! Never knew that would be an issue

[Newton-Duarte]

I was having the same problem, and was about to create a discussion here too. After reading @wongjn's comment, I visited the twMerge website and searched for this configuration, and it now works perfectly.

twMerge configuration

import { type ClassValue, clsx } from "clsx"; import { extendTailwindMerge } from "tailwind-merge"; const twMerge = extendTailwindMerge({ extend: { theme: { text: ["xxs"], }, }, }); export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

[yasinitskyi]

Nice! Thx for the snippet