问题:TailwindCSS 为什么前者比后者重要?

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

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

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

  • NuxtJS 2.15.8

  • TailwindCSS 3.0.23

  • postcss 8.4.5

解答

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

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

# vue.js
Logo
Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

具身智能测试题解析

问题1:具身智能（Embodied Intelligence）的核心观点强调智能的产生依赖于（ ） 正确答案：B. 智能体与环境的交互以及自身的物理形态 解析：具身智能的核心是 “智能离不开身体与环境的互动”，智能体的物理形态（如机械臂、人形机器人）和与外界的实时交互，是其产生认知、决策能力的基础，区别于纯软件的抽象智能模型。 问题2:以下哪一项是具身智能的典型应用场景？（ ） 正确答案：B.

avatar Vue

播客 | Fathym 关于 Vue 的观点

在科罗拉多州,我们有许多美景。从山顶到山谷和中间的山丘。 谈到 Vue.js,Fathym 是 JavaScript 框架的粉丝。 我们的工程总监 Jeremy Tomlinson 和品牌传播代表 Rich Kurtzman 很高兴成为 8 月中旬 Vue 播客观点的一部分。 在采访中,主持人史蒂夫爱德华兹向我们的团队询问了很多事情,包括: Fathym 是谁以及我们做什么 使用 Azure 和/

avatar Vue

带有浮动 Vue 和 Tailwind 的 Vue 下拉菜单

可用于在 Vue 应用程序中创建工具提示、弹出框和菜单的最流行的库之一是floating-vue。虽然floating-vue提供了一个Dropdown组件,但它的样式和添加其他功能(例如键盘导航)由用户决定。 我们将创建什么 我们将使用floating-vue的Dropdown组件作为基础,然后在顶部添加键盘功能。然后,我们将使用该组件使用 Tailwind 创建一个下拉菜单。 最终结果将类似于

avatar Vue