Tailwind CSS how to style a href links in React? - css

Question

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.

Answer 1

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
}

Answer 2

EDIT: It appears that this extra configuration is not needed with Tailwind 3 (at least as tested with 3.1.1). It may still be needed if you use Tailwind 2. See Patrik's comment below for an example.
As Luke correctly explained, Tailwind's Preflight removes all the browser defaults. You'll have to add the styling yourself:
className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"
However, you can't just use visited: with text-purple-600 without some configuration (at least with Tailwind 2. I'm not familiar with older versions). You'll also need to add the following to your Tailwind config at your project root:
// tailwind.config.js
module.exports = {
// ...
variants: {
extend: {
textColor: ['visited'],
}
},
}
That way, Tailwind will make all the classes with visited: available for use with all the text color classes.
You can learn more about enabling extra variants in the Tailwind docs.

Answer 3

So the other answers correctly have pointed out that preflight and/or base will reset the components, but you can also use the #layer and #apply directives to apply classes to elements in bulk.
#layer gives you a bucket to put things into, the ones currently available in Tailwind would be like base, components, and utilities.
For example, if you wanted to set all links to blue and underline, you could do the following:
#layer base {
a {
#apply text-blue underline
}
}
The linked examples show how you could group the elements to make a meta-class for styling buttons consistently.
#layer components {
.btn-blue {
#apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
}

Answer 4

I have to disagree with others here who suggest re-adding the default anchor tag styling as a solution. You can do this, but one annoyance of working with normal anchor tags is when you wrap a button in an anchor tag, the styling cascades into the text on the button, which is super annoying.
Instead, I would suggest creating your own utility class that applies these styles instead of changing the styles for all <a> tags. For example:
.hyperlink {
#apply text-blue-600 underline
}
.hyperlink:visited {
#apply text-purple-600
}
Now, use that class explicitly when you want it rather than applying it no matter what.
<a class="hyperlink" href="/foo/bar">Text link</a>
<button>Style-Free Button!</button>

Answer 5

If you are using #apply note that the states (like hover) cannot be added in-line like you would pass to a class.
a {
#apply underline text-blue-600 hover:text-blue-800 visited:text-purple-600
}
They need to be broken out and matched to the css states like this:
a {
#apply underline text-blue-600
}
a:hover {
#apply text-blue-800
}
a:visited {
#apply text-purple-600
}

Answer 6

tailwind.config.js
extend: {
content: {
'externalLink': "url('images/icons/icon-external.svg')",
}
},
In css
a {
#apply underline underline-offset-4 decoration-1 decoration-primary;
&:hover {
#apply no-underline bg-tertiary/20;
}
&:visited {
#apply text-primary;
}
&[target="_blank"]:after {
#apply content-externalLink inline-block ml-1 mt-1;
}
}