TailwindCSS 为什么前者 class 比后者更重要？

Question

<p class="mt-1 mt-2" ></p>

为什么上面显示的边距是 4 像素而不是边距 8 像素因为最后一个class应该比较重要

我在 vuejs 中写一个“if”时遇到了很多麻烦，因为如果正常写新的 classes 总是附加到最后。

NuxtJS 2.15.8
TailwindCSS 3.0.23
postcss 8.4.5

Answer 1

这不是优先级问题 CSS-wise（比如特异性），但对于 Tailwind，您应该一次只使用一个 class，因为它们是在单个文件中定义的。

所以应该使用一些条件来实现您正在寻找的最终结果。检查我的的第二部分。它基于一位 Tailwind 维护者的回答（在 Github 讨论中）。

这是总体思路

<button
  class="flex items-center w-auto p-4 text-center ..."
  :class="[
    callToAction.types[color][variant], // here is the important part
    { 'opacity-50 cursor-not-allowed shadow-none': disabled },
  ]"
>
  Nice flexible button
</button>

否则，像tailwind-merge这样的包也可以解决这种行为。

TailwindCSS 为什么前者 class 比后者更重要？

TailwindCSS Why is the first class more important than the latter?

vue.js

nuxt.js

tailwind-css