Base Styles For Text Link

Tailwind CSS's base styles directive includes a CSS reset called 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:

<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:

<a
  className="hover:underline text-purple-600 cursor-pointer hover:text-purple-800"
  href="https://twitter.com/jbrancha"
>
  twitter
</a>

1.1 KiB Raw Blame History

Base Styles For Text Link

1.1 KiB

Raw Blame History