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

为什么上面显示的边距是4px而不是8px

在vuejs中编写"if"时,我遇到了很多麻烦,因为通常情况下,如果编写的是新类,那么新类总是附加到末尾.

  • NuxtJS 2.15.8
  • TailwindCSS 3.0.23
  • 邮政编码8.4.5

推荐答案

这不是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这样的包也可以用来解决这种行为.

Vue.js相关问答推荐

复选框列未在vutify中排序

如何在AXIOS调用响应中动态导入视频并创建它的绝对路径?

Vue.js编译的render函数不起作用

如何 for each 动态创建的按钮/文本字段设置唯一变量?

禁用 vue-cli webpack 编码图像 base64

如何解决 Vue.js 中的相邻 JSX 元素必须包含在封闭标记中问题

我可以在未注册的组件上构建 Vue.js 失败吗?

在keyup Vuejs 2上获取输入值

VueJS 插件的如何react式绑定?

根据 URL 有条件地隐藏视图组件

Django Rest 框架、CSRF 和 Vue.js

如何在 Vue.js 中传递 $router.push 中的数据?

Vue Cli 3 不允许我在 Webpack 中处理 SVG

如何将数据传递给 Vue.js 中的路由视图

在找不到图像源时设置替代图像

错误:找不到模块'@vue/babel-preset-app'

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式

v-if 未在计算(computed)属性上触发

如何在 vue.js 中通过单击事件发出值

Vue中的嵌套循环