Tailwind CSS, class precedence is not respected

I have the following element:

<td class="min-w-[10rem] max-w-[10rem] overflow-ellipsis text-sm text-text-light px-3 min-w-0"></td>

All of its class names are generated automatically through the component, except for the last one, min-w-0.

Since min-w-0 is the last class name listed, I expect it to override min-w-[10rem], the 1st class name listed.

However, for some reason, min-w-[10rem] seems to take precedence.

From Chrome dev tools:

Any insights as to why, and how I can fix it?

Tailwind sets the precedence by the order in which it adds classes to the CSS that's generated after scanning for utility classes in your code. The order of the items in your class string will not make a difference.

You can, however, make min-w-0 take precedence by adding a bang to the front of your class, e.g. !min-w-0. See: https://v3.tailwindcss.com/docs/configuration#important-modifier

A heavy-handed approach would be to use a library like tailwind-merge to strip the competing utility classes: https://github.com/dcastil/tailwind-merge