Make border utilities hoverable

[spyric]

Hello all!

Just tried TailwindCSS and It's perfect, but I think that borders should be able to be combined with hover: preffix.

Here is sample. Task make link underline dashed:
<a href="#" class="no-underline border-b hover:border-b-0">Text link</a>

Similar approach with manipulating borders are used on https://laravel.com/ nav menu

[MichaelDeBoey]

I think we can have most of the utilities be combined with hover:, like we have with the responsive ones (sm, md, lg & xl)?

[adamwathan]

Border colors are hoverable which might be enough for your situation.

How does this work for you?

<a href="#" class="no-underline border-b hover:border-transparent">Text link</a>

This is how I usually handle these sorts of things, because otherwise introducing a border when it wasn't there before can shift the content around.

[spyric]

@adamwathan Yeah, you're right, It's work exactly that I want.

[sahin85]

How can we achieve this " border bottom 2px solid on hover" in Tailwindcss?

hover

do we have to add such a code to config file?

cheers
sahin

[mooijtech]

I'm also trying to get a border bottom on hover, this doesn't apply any of the hover classes, why?

<a class="text-white hover:font-bold hover:border-b hover:border-white mr-12" href="/about">About us</a>

[Qwiso]

to @mooijtech and future clicks

borderRadius class does not work with the hover: state. this is probably intended because you achieve the same functionality
by doing something like (for a nice menu style) class="border-b-2 border-double border-transparent hover:border-current cursor-pointer select-none"

also note that, for my example, you need to edit your config

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

[6LYTH3]

Per Tailwindcss default variants reference

we can enable more variants to support the utilities we want by configure in tailwind.config.js

Example configuration for support

<p className='text-gray-500 font-thin hover:border-b hover:border-black'>hover me!</p>

Add more pseudo class

// tailwind.config.js
variants: {
  extend: {
    borderStyle: ['responsive', 'hover'],
    borderWidth: ['responsive', 'hover'],
    },
},

[Prajapatisantu]

first set border then set opacity 0 and on hover:set opacity 100, so problem solve on hover set border.