Replicate Tailwind link styling using Tailwind #4209
-
|
I'm hoping to replicate the styling of Tailwind Links in a project I'm working on, and I'm hoping to achieve this styling using Tailwind!
The effect we are looking for is an underlined block that overlaps the text slightly. I've tried to achieve this using a number of techniques including underlines, bottom borders, backgrounds, and shadows but have not found success. I'm very new to Tailwind so any help would be much appreciated! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
What I can see these functions are not built into Tailwind yet. https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color If you want to add them yourself you can do that in your @tailwind base;
@tailwind components;
.decoration-red-500 {
text-decoration-color: red !important;
}
@tailwind utilities;<a href="#" class="underline decoration-red-500">My link</a>There is probably a better way to do it but this is quick. |
Beta Was this translation helpful? Give feedback.
What I can see these functions are not built into Tailwind yet.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color
If you want to add them yourself you can do that in your
tailwind.cssclass.There is probably a better way to do it but this is quick.