Make border utilities hoverable about tailwindcss HOT 8 CLOSED

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.

from tailwindcss.

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'],
      }
    }
  }

from tailwindcss.

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

from tailwindcss.

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

from tailwindcss.

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

from tailwindcss.

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

from tailwindcss.

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>

from tailwindcss.

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'],
    },
},

from tailwindcss.