Comments (8)
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?
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.
Related Issues (20)
- Cannot read properties of null (reading '__isOptionsFunction') HOT 2
- [email protected] build time significantly exceeds previous versions for monorepo
- Tailwind Standalone Throwing Caniuse Browserlist Error When Running Without Tailwind CLI HOT 2
- PostCSS warning for custom utility used with before:/after: HOT 1
- [v4] "ring" doesn't show in Firefox HOT 1
- `supports` variant compiles function syntax incorrectly HOT 5
- Classes in an object aren't detected HOT 1
- v4: Bug with how the parser handles nested `quote_stack` and `bracket_stack` characters when in a string context HOT 2
- ERROR - Module not found - Can't resolve './${previewSrc}' HOT 2
- Giving error while installing tailwindcss
- tailwind css installed but not working in my webpack+ umi + react project
- TailwindCSS is using stderr to log the messages "Rebuilding..." and "Done in [x]ms"
- [v4] Chrome ~v103 chokes on comma in .bg-gradient-* Utility HOT 1
- PostCSS plugin not processing changes outside base directory HOT 3
- Tailwind does not delete unused css
- Cannot transition between outer and inner shadows
- Border is being overwritten despite appearing after the original border class
- tailwind-cli casually emits to `stderr` HOT 2
- [v4] Publish @tailwindcss/postcss as ESM HOT 1
- [v4] Sourcemaps not enabled in postcss plugin HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwindcss.