我可以使用 Tailwind CSS 在悬停时实现带下划线的按​​钮吗？

Posted 2023-03-07

【中文标题】我可以使用 Tailwind CSS 在悬停时实现带下划线的按​​钮吗？

【英文标题】：Can I achieve an underlined button on hover with Tailwind CSS?

【发布时间】：2021-07-23 02:22:45

【问题描述】：

我开始学习 Tailwind CSS 并尝试实现下面的按钮。它是一个空白按钮，在悬停时会突出显示其底部边框。

但是，浏览文档，我似乎无法重现效果。

【问题讨论】：

设置底部边框，使其透明，并在悬停时切换到给定颜色。使用过渡来平滑效果。在 Tailwind 中完全可以实现。

哪具体位给您带来了问题？如果您提供到目前为止所拥有的现场演示，将会有所帮助。

【参考方案1】：

首先，将以下内容添加到您的 tailwind.config.js。

module.exports = 
    variants: 
        extend: 
            // ...
           borderStyle: ['hover'],
        
    

然后使用以下实用程序创建按钮。

<button class="p-4 font-bold font-sans border-b-2 border-double 
    border-transparent hover:border-current cursor-pointer select-none">
    Button
</button>

最后，运行npm run prod。

【参考方案2】：

<link href="https://unpkg.com//tailwindcss@2.1.1/dist/tailwind.min.css" rel="stylesheet" />

<div class="flex items-center justify-center min-h-screen">
  <button class="text-6xl font-bold transition duration-150 border-b-8 border-transparent hover:border-purple-500">
    Button
  </button>
</div>