TailwindCSS 为什么前者比后者重要？答案

【问题标题】：TailwindCSS Why is the first class more important than the latter?TailwindCSS 为什么前者比后者重要？
【发布时间】：2022-10-18 04:28:59
【问题描述】：

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

为什么上面显示margin 4 px而不是margin 8 px 因为最后一节课应该更重要。

在 vuejs 中编写“if”时我遇到了很多麻烦，因为如果正常编写新类总是附加到末尾。

NuxtJS 2.15.8
TailwindCSS 3.0.23
postcss 8.4.5

【问题讨论】：

标签： vue.js nuxt.js tailwind-css

【解决方案1】：

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

所以应该使用一些条件来实现你正在寻找的最终结果。检查我的answer here 的第二部分。它基于 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 这样的包来解决这种行为。

【讨论】：

【解决方案2】：

在一些使用顺风的工作和一些在 ReactJS 上使用样式组件/样式系统的经验之后，您实际上可以强制一些具有自定义断点的类，因为断点具有更高的优先级。

我将此添加到我的顺风配置中，我们可以保持相同的系统移动优先，并为属性添加更多优先级。

theme: {
  screens: {
    _: '0px',
  },
},

您可以使用它来定义一些更高优先级的属性

_:text-blue like lg:text-blue

希望能帮助到你！

【讨论】：