Can I achieve an underlined button on hover with Tailwind CSS?

user_13639347 0
Viewed 3153

I'm beginning to learn Tailwind CSS and am trying to implement the button below. It's a blank button that highlights its bottom border on hover.

enter image description here

However, scanning through the docs, I can't seem to be able to recreate the effects.

tailwind-css css html
3 Answers

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

user_137749920

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.

user_6334400
user_150117780
Related