Tailwind CSS how to style a href links in React?

Issue

For some reason, tailwind seems to have removed the "blue" and "underlined" part of http links.

How do I get this functionality back?

For example, in my React code, i have:

return (
  <a href={v.url}>{v.alias}</a>
);

but this link shows up like normal font, and there’s no underline. there’s also no notion for browser to remember or hover different color on the link.

Solution

Tailwind’s Preflight functionality will remove all of the browsers’ default stylings for most elements, giving you a clean basis to start from, to make cross-browser styling more consistent.

You need to re-add the styles you wish, for example:

className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"

or:

a {
   @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
}

Answered By – Luke Storry

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published