mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 15:18:01 +00:00
38 lines
1.1 KiB
Markdown
38 lines
1.1 KiB
Markdown
# Base Styles For Text Link
|
|
|
|
[Tailwind CSS](https://tailwindcss.com/)'s base styles directive includes a CSS
|
|
reset called [Preflight](https://tailwindcss.com/docs/preflight). It normalizes
|
|
styling inconsistencies between browsers, and in the process it wipes out a
|
|
bunch of default styles you might be expecting.
|
|
|
|
A notable one is styling for a text link (`<a href ...>link</a>`). These tend
|
|
to be blue with an underline, use the _pointer_ cursor, and sometimes change
|
|
color slightly when you hover or _activate_ them.
|
|
|
|
Breaking from that mold a little, here is a reasonable base style for a text
|
|
link:
|
|
|
|
```html
|
|
<a
|
|
className="underline text-purple-600 cursor-pointer hover:text-purple-800"
|
|
href="https://twitter.com/jbrancha"
|
|
>
|
|
twitter
|
|
</a>
|
|
```
|
|
|
|
This adds the `text-decoration: underline`, some color, the `cursor: pointer`,
|
|
and a slightly darker color on hover.
|
|
|
|
And for a slight variation, I'll make the `underline` text decoration appear
|
|
only on hover:
|
|
|
|
```css
|
|
<a
|
|
className="hover:underline text-purple-600 cursor-pointer hover:text-purple-800"
|
|
href="https://twitter.com/jbrancha"
|
|
>
|
|
twitter
|
|
</a>
|
|
```
|