Tailwind CSS，类优先级不受尊重

Question

我有以下元素：

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

它的所有类名都是通过组件自动生成的，除了最后一个min-w-0.

由于min-w-0是列出的最后一个类名，我希望它会覆盖min-w-[10rem]列出的第一个类名。

然而，由于某种原因，min-w-[10rem]似乎优先。

来自 Chrome 开发工具：

关于原因以及如何解决它有什么见解吗？

谢谢！

Answer 1

Tailwind 根据将类添加到扫描代码中的实用程序类后生成的 CSS 的顺序来设置优先级。字符串中项目的顺序class不会产生影响。

但是，您可以min-w-0通过在类的前面添加一个感叹号来获得优先权，例如!min-w-0。请参阅： https: //tailwindcss.com/docs/configuration#important-modifier

一种严厉的方法是使用像 tailwind-merge 这样的库来剥离竞争的实用程序类：https://github.com/dcastil/tailwind-merge