我可以使用 Tailwind CSS 在 hover 上实现带下划线的按钮吗？

Question

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

但是，浏览文档时，我似乎无法重新创建效果。

Answer 1

 <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>

Answer 2

首先，将以下内容添加到您的 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 。

Answer 3

您可以使用转换 class. 并在https://tailwindcss.com/docs/transition-property中查看转换文档