Custom classes not being merged correctly in tailwind-merge

[itasimo]

Closes #28

[coderabbitai]

Walkthrough

Updated Tailwind class merging configuration in src/lib/utils.ts by adding classGroups to extendTailwindMerge. The change introduces grouping rules for typography, background color, and text color classes to ensure proper merging behavior during class composition.

Changes

Cohort / File(s)	Summary
Tailwind Merge Configuration src/lib/utils.ts	Added classGroups object to extendTailwindMerge with three grouping rules: typo for font-size classes, bg for background-color classes, and text for text-color classes. This ensures these class categories are treated as mutually compatible/mergeable sets in the cn() function.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Custom classes not being merged correctly in tailwind-merge' directly describes the main issue being fixed and matches the linked issue #28, making it clear and specific.
Linked Issues check	✅ Passed	The PR adds classGroups for font-size, bg-color, and text-color merging to address issue #28's requirement to extend twMerge for correct class merging across utility groups.
Out of Scope Changes check	✅ Passed	All changes in src/lib/utils.ts are directly related to extending tailwind-merge configuration to fix custom class merging, with no unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/lib/utils.ts`:
- Around line 35-52: The custom color merge map in utils.ts is missing entries
for the button and card color classes, so add "bg-button-primary" and
"bg-button-tertiary" into the "bg-color" group's bg array and add
"text-card-foreground" into the "text-color" group's text array so twMerge will
treat those custom classes as conflicting equivalents; update the bg-color and
text-color definitions (the arrays shown in the diff) to include those string
literals alongside the existing custom names.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 54bb6b05-75e3-44bb-be28-64866a673d62

📥 Commits

Reviewing files that changed from the base of the PR and between 998b219 and 8f43538.

📒 Files selected for processing (1)

• src/lib/utils.ts

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Custom color merge coverage is still incomplete (Line 35, Line 51).

bg-button-primary / bg-button-tertiary (from src/components/ui/button.tsx) and text-card-foreground (from src/components/card-icon/index.tsx) are not included, so conflicting custom color classes can still survive twMerge. This likely leaves issue #28 partially unresolved.

Suggested patch

       "bg-color": [
         {
           bg: [
             "background",
             "background-blur",
+            "button-primary",
+            "button-tertiary",
             "red",
             "green",
+            "grey",
             "blue-primary",
             "blue-primary-blur",
             "blue-secondary",
             "blue-tertiary",
             "blue-tertiary-blur",
           ],
         },
       ],
       // custom text colors from figma
-      "text-color": [{ text: ["text-primary", "text-secondary", "text-accent-darkbg", "text-accent-lightbg"] }],
+      "text-color": [
+        {
+          text: [
+            "text-primary",
+            "text-secondary",
+            "text-accent-darkbg",
+            "text-accent-lightbg",
+            "card-foreground",
+          ],
+        },
+      ],

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	"bg-color": [
	{
	bg: [
	"background",
	"background-blur",
	"red",
	"green",
	"blue-primary",
	"blue-primary-blur",
	"blue-secondary",
	"blue-tertiary",
	"blue-tertiary-blur",
	],
	},
	],
	// custom text colors from figma
	"text-color": [{ text: ["text-primary", "text-secondary", "text-accent-darkbg", "text-accent-lightbg"] }],
	},
	"bg-color": [
	{
	bg: [
	"background",
	"background-blur",
	"button-primary",
	"button-tertiary",
	"red",
	"green",
	"grey",
	"blue-primary",
	"blue-primary-blur",
	"blue-secondary",
	"blue-tertiary",
	"blue-tertiary-blur",
	],
	},
	],
	// custom text colors from figma
	"text-color": [
	{
	text: [
	"text-primary",
	"text-secondary",
	"text-accent-darkbg",
	"text-accent-lightbg",
	"card-foreground",
	],
	},
	],

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/lib/utils.ts` around lines 35 - 52, The custom color merge map in
utils.ts is missing entries for the button and card color classes, so add
"bg-button-primary" and "bg-button-tertiary" into the "bg-color" group's bg
array and add "text-card-foreground" into the "text-color" group's text array so
twMerge will treat those custom classes as conflicting equivalents; update the
bg-color and text-color definitions (the arrays shown in the diff) to include
those string literals alongside the existing custom names.