tailwindmerge not recognizing my custom CSS variables correctly.

[J-Amberg]

I have variables defined in my tailwind theme

@theme {
  /* COLORS */
  --color-primary-dark: oklch(87.88% 0.2163 154.99);
  --color-primary-light: oklch(40.92% 0.1177 251.61);
  --color-background-dark: oklch(18.31% 0.004 285.99);
  --color-background-light: oklch(100% 0 0);
  --color-background2-dark: oklch(37.99% 0.0216 158.19);
  --color-background2-light: oklch(92.12% 0.01 155.09);
  --color-label-dark: oklch(97.08% 0.0137 272.69);
  --color-label-light: oklch(18.31% 0.004 285.99);
  --color-label2-dark: oklch(98.04% 0.0393 100.85);
  --color-label2-light: oklch(44.1% 0.0917 74.75);
  --color-border-dark: oklch(58.29% 0.0105 242.95);
  --color-border-light: oklch(34.6% 0.0225 285.16);
  --color-inactiveCell-dark: oklch(33.85% 0.0123 279.26);
  --color-inactiveCell-light: oklch(80.73% 0.0018 247.84);
  --color-error: oklch(51.61% 0.2019 25.94);
  --color-cell1-1: oklch(85.48% 0.1217 73.88);
  --color-cell1-2: oklch(82.08% 0.1486 72.1);
  --color-cell1-3: oklch(78.81% 0.1666 67.54);
  --color-cell1-4: oklch(74.25% 0.169954 62.6042);
  --color-cell1-5: oklch(64.84% 0.1477 63.12);
  --color-cell2-1: oklch(88.61% 0.0837 330.14);
  --color-cell2-2: oklch(78.52% 0.1667 331.39);
  --color-cell2-3: oklch(70.4% 0.2384 332.77);
  --color-cell2-4: oklch(65.28% 0.279 334.23);
  --color-cell2-5: oklch(55% 0.2384 334.38);
  --color-cell3-1: oklch(93.77% 0.0935 165.88);
  --color-cell3-2: oklch(89.72% 0.1689 160.93);
  --color-cell3-3: oklch(87.88% 0.2163 154.99);
  --color-cell3-4: oklch(68.71% 0.171451 154.5285);
  --color-cell3-5: oklch(44.86% 0.1089 155.95);
  --color-cell4-1: oklch(94.42% 0.1067 98.28);
  --color-cell4-2: oklch(91.67% 0.1548 98);
  --color-cell4-3: oklch(89.32% 0.1789 96.16);
  --color-cell4-4: oklch(80.08% 0.1643 94.54);
  --color-cell4-5: oklch(63.3% 0.1299 94.88);
  --color-cell5-1: oklch(85.54% 0.0876 356.24);
  --color-cell5-2: oklch(76.36% 0.1538 359.52);
  --color-cell5-3: oklch(67.97% 0.2229 4.1);
  --color-cell5-4: oklch(63.92% 0.2528 12.56);
  --color-cell5-5: oklch(53.8% 0.215 13.79);
  --color-cell6-1: oklch(95.29% 0.0539 87.25);
  --color-cell6-2: oklch(89.71% 0.091 77.51);
  --color-cell6-3: oklch(84.47% 0.1258 71.74);
  --color-cell6-4: oklch(79.66% 0.1559 66.31);
  --color-cell6-5: oklch(75.4% 0.1769 58.7);
  --color-cell7-1: oklch(90.49% 0.0681 219.8);
  --color-cell7-2: oklch(84.11% 0.1105 222.57);
  --color-cell7-3: oklch(79.02% 0.1401 226.17);
  --color-cell7-4: oklch(73.43% 0.1485 231.29);
  --color-cell7-5: oklch(59.39% 0.119452 230.8151);
  --color-cell8-1: oklch(85.6% 0.0738 34.22);
  --color-cell8-2: oklch(76.04% 0.1346 35.2);
  --color-cell8-3: oklch(68.05% 0.1938 35.1);
  --color-cell8-4: oklch(61.52% 0.222 33.17);
  --color-cell8-5: oklch(49.87% 0.1768 33.7);
  --color-cell9-1: oklch(82.51% 0.0906 305.81);
  --color-cell9-2: oklch(69.76% 0.1615 304.12);
  --color-cell9-3: oklch(58.13% 0.2243 301.07);
  --color-cell9-4: oklch(48.84% 0.2472 296.41);
  --color-cell9-5: oklch(39.91% 0.1984 296.72);
  --color-cell10-1: oklch(83.61% 0.0725 244.98);
  --color-cell10-2: oklch(77.33% 0.1012 245.48);
  --color-cell10-3: oklch(65.49% 0.1562 249.3);
  --color-cell10-4: oklch(52.47% 0.145 251.12);
  --color-cell10-5: oklch(36.82% 0.0953 249.86);
  --color-cell11-1: oklch(84.13% 0.076 67.14);
  --color-cell11-2: oklch(76.45% 0.1125 64.75);
  --color-cell11-3: oklch(69.53% 0.1437 60.7);
  --color-cell11-4: oklch(57.95% 0.1232 60.05);
  --color-cell11-5: oklch(44.96% 0.0932 60.19);
  --color-cell12-1: oklch(92.09% 0.1921 102.11);
  --color-cell12-2: oklch(86.91% 0.177696 91.3102);
  --color-cell12-3: oklch(77.36% 0.173503 65.0523);
  --color-cell12-4: oklch(68.14% 0.2136 40.06);
  --color-cell12-5: oklch(62.8% 0.2577 29.23);}

However, when I try to use these variables with twMerge they do not work. I've tried extendingTwMerge in a multitude of different ways:

import { extendTailwindMerge } from 'tailwind-merge';

export const twMerge = extendTailwindMerge({
override: {
  theme: {
    color: ['cell3-3']
  },
},
classGroups: {
  bgColor: [
    { pattern: /^bg-(cell\d{1,2}-\d)$/ },
  ],
  borderColor: [
    { pattern: /^border-(cell\d{1,2}-\d)$/ },
  ],
  textColor: [
    { pattern: /^text-(cell\d{1,2}-\d)$/ },
  ],
},
});

this is the only config I've gotten to work somewhat. Note if I hardcode the value like 'bg-cell3-3' then it works but when I'm trying to do it dynamically like bg-${color} where color = 'cell3-3' then it does not work. In this config I have the text-cellX-X working properly but still border color and background color are not working.

<div className={twMerge(`h5 bold`, `text-${habit.color}`)}>{habit.name}</div>

works

<div 
            className={twMerge(
                'cursor-pointer w-[40px] h-[40px] p-m border-[1px] rounded-full dark:bg-background-dark bg-background-light group',
                `border-${color} hover:bg-${color}`
            )}
        >

Does not work

Does anyone have any ideas?

thanks so much, been messing with this for hours

[J-Amberg]

#517 (comment)

Also I've seen this where he says you don't need to extend colors. But the regular twMerge isn't working either

[dcastil]

Hey @J-Amberg! 👋

Thanks for your patience. As you mentioned in #550 (comment), you indeed don't need to configure color classes. tailwind-merge detects all classes like text-*, bg-*, border-*, etc. that don't belong anywhere else as color classes already.

Note if I hardcode the value like 'bg-cell3-3' then it works but when I'm trying to do it dynamically like bg-${color} where color = 'cell3-3' then it does not work.

This gives me the indication that your problem is not with tailwind-merge but rather Tailwind CSS. You can't use dynamic classes like bg-${color} because Tailwind CSS needs to be able to read which classes exactly you're using. You can read more about that in https://tailwindcss.com/docs/detecting-classes-in-source-files#dynamic-class-names.