Description
What version of Tailwind CSS are you using?
v4.1.7
Reproduction URL
https://play.tailwindcss.com/dDlaG7IwVD
Describe your issue
Tailwind removes underlines from links by default and sets their colour to the same as the surrounding text:
tailwindcss/packages/tailwindcss/preflight.css
Lines 87 to 91 in 4bfacb3
Even when configured with a link colour, removing the underline will fail basic A accessibility (unless 3:1 contrast is used compared to body text).
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
Personally, I would prefer that Tailwind uses browser default behaviour for underlining links, rather than being inaccessible by default. Alternatively, please could you provide and document a way for users to revert to the browser default behaviour for underlining links?
At the moment, the only documentation I can find seems to lead users to do the following:
@import "tailwindcss";
@layer base {
a {
text-decoration-line: underline;
}
}...but this does not result in browser default behaviour, which is to underline anchors with an href and to not underline ones without an href. This is a useful and intentional feature.
Unfortunately in modern web dev, a common antipattern is to render an anchor with an onclick handler but no href. A link without an href is not focusable so the browser default styles help to discourage this.
By encouraging users to write CSS that does not distinguish between anchors with and without an href, I think Tailwind encourages this inaccessible antipattern.
This could be case of adding something like this (note use of :any-link) to the docs:
@import "tailwindcss";
@layer base {
a:any-link {
text-decoration-line: underline;
}
}Though for better browser compatibility, perhaps a way to remove the lines from preflight would be better.