其文档中的 Tailwind 代码 hover:border 对我不起作用

Question

我的顺风代码表现得非常奇怪。我有一个 div 作为按钮，我希望在悬停时有一个扩展的边框。我的第一个想法是 hover:border-2。那行不通，所以我访问了 tailwind 文档来弄清楚。然后我把他们的类从那里 border-2 hover:border-t-4 放到我的按钮上，像这样： <div class="inline-block bg-green-500 p-2 rounded-2xl border-2 hover:border-t-4">Register</div> 并且按钮不响应悬停。当我将这条线放到 Tailwind playground 时，令人惊讶的是代码在那里工作。有谁知道我在那里做错了什么？干杯

<template>
  <h1 class="text-2xl font-semibold">Register to use our app fully!</h1>
  <div class="login">
    <form class="bg-red-400 p-2 max-w-2xl mx-auto">
      <div class="flex flex-col items-center">

          <input type="text" id="name" placeholder="Nickname" class="m-2 p-1"/>

          <input type="text" id="name" placeholder="Password" class="m-2 p-1"/>

          <input type="number" id="name" placeholder="Age" class="m-2 p-1"/>

        <div class="p-2">
          <label for="name">I agree with licensing agreements: </label>
          <input type="checkbox" id="name" />
        </div>
      </div>
        <div class="inline-block bg-green-500 p-2 rounded-2xl border-2 hover:border-t-4">Register</div>
    </form>
  </div>
</template>

Answer 1

看来您使用的是 v3 以下的 tailwind 版本。根据文档悬停不支持边框宽度但支持边框颜色。检查一下 https://v2.tailwindcss.com/docs/hover-focus-and-other-states#hover 但它支持 v3 中的边框宽度。尝试使用您的代码在 Tailwind Playground 中更改版本，看看它是否有效

其文档中的 Tailwind 代码 hover:border 对我不起作用

Tailwind code hover:border from its docs doesnt work for me

css

vue.js

tailwind-css