text-balance incompatibility

[jamestrenda]

Describe the bug

Using text-balance from the Tailwind Insiders package with a text color utility class, such as text-white, results in only the last class being kept. If I do text-balance text-white, only text-white is kept. If I do text-white text-balance, only text-balance is kept. Unfortunately, these two classes do two different things and should, therefore, not conflict when merging.

To Reproduce

npm install tailwindcss@insiders and then try using twMerge('text-white text-balance')

Expected behavior

The two classes should not conflict with each other so that they're both added to the final output of twMerge

Environment

• tailwind-merge version: 1.14.0
• tailwind version: 0.0.0-insiders.614c7e2

[dcastil]

Hey @jamestrenda! 👋

The twMerge function exported from tailwind-merge only supports Tailwind features from stable releases. If you want to add support for the text-balance class, you need to configure tailwind-merge.

Here is an example on how to configure tailwind-merge: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/recipes.md#adding-custom-scale-from-tailwind-config-to-tailwind-merge-config.

And here is the documentation on how the tailwind-merge configuration works: https://github.com/dcastil/tailwind-merge/blob/v1.14.0/docs/configuration.md#usage-with-custom-tailwind-config.

---

For myself:

Related: #315, #302, #276, #275, #274, #250, #207

[jamestrenda]

I suspected that would be your response, and I completely understand your reasoning for that. Glad to know there is a viable solution in the meantime. I will take a look at those links when I have more time. Thank you very much.

[castrolem]

Not gonna lie, it is awesome that this issue was made not so long ago before I encountered this issue because after a long debugging session I understood that it was twMerge, from the docs @dcastil it took me a while to figure out that a property like text balance needs something like

classGroups: {
  textBalance: ["text-balance"],
},

Since the example is tackling a more complex property configuration it made it a bit more confusing for me, not sure if it would be a feature request per se, but it would be nice to have both examples in the docs, let me know if it makes sense and you agree with my opinion. I can add a feature request for it, and tackle it if that's ok.

[skoshx]

Could this be reopened now that text-balance is in the stable Tailwind? Just faced with this problem.

[dcastil]

Hey @skoshx! 👋

Just checked, but it is in the tailwind-merge config already. You can find it here: https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts#L854

Are you sure that you're on the newest version?

[skoshx]

Wow this is embarassing, forgot to upgrade 💀 Thanks a lot for this! Can be closed :)