Tailwindcss: Make border utilities hoverable

Created on 2 Nov 2017  路  3Comments  路  Source: tailwindlabs/tailwindcss

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

Most helpful comment

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.

All 3 comments

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

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.

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

manniL picture manniL  路  3Comments

dbpolito picture dbpolito  路  3Comments

chasegiunta picture chasegiunta  路  3Comments

Tjoosten picture Tjoosten  路  3Comments

divdax picture divdax  路  3Comments