<p class="mt-1 mt-2" ></p>
为什么上面显示的边距是4px而不是8px
在vuejs中编写"if"时,我遇到了很多麻烦,因为通常情况下,如果编写的是新类,那么新类总是附加到末尾.
- NuxtJS 2.15.8
- TailwindCSS 3.0.23
- 邮政编码8.4.5
<p class="mt-1 mt-2" ></p>
为什么上面显示的边距是4px而不是8px
在vuejs中编写"if"时,我遇到了很多麻烦,因为通常情况下,如果编写的是新类,那么新类总是附加到末尾.
这不是CSS方面的优先级问题(比如特殊性),但是对于Tailwind,一次应该只使用一个类,因为它们是在单个文件中定义的.
因此,我们应该使用一些条件来实现你想要的最终结果.判断我answer here的第二部分.这是基于Tailwind的一位维护人员(在Github讨论中)的回答.
这是总的 idea
<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这样的包也可以用来解决这种行为.