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

bbmckpt7 于 2022-11-26 发布在其他

关注(0)|答案(3)|浏览(142)

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

然而，通过扫描文件，我似乎无法重现的效果。

css

来源：https://stackoverflow.com/questions/67322070/can-i-achieve-an-underlined-button-on-hover-with-tailwind-css

3条答案

按热度按时间

q0qdq0h21#

<script src="https://cdn.tailwindcss.com"></script>

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

赞(0）回复(0）举报 2022-11-26

oyxsuwqo2#

First, add the following to your tailwind.config.js.

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

Then use the following utilities to create the button.

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

Finally, run npm run prod .

赞(0）回复(0）举报 2022-11-26

bybem2ql3#

您可以使用transition class.并检查https://tailwindcss.com/docs/transition-property中的transition文档

赞(0）回复(0）举报 2022-11-26