GitHub

Link

The browser's default anchor, respecified in Tailwind's nearest palette colors. Baseline states: unvisited, visited, and the href-less placeholder. Beyond the baseline, markers derive from the anchor's own attributes: a new tab, a download, an exit, a PDF suffix, and the page you are already on each pull in their indicator via global attribute selectors. Hover adds nothing beyond the pointer cursor; the OS focus ring is live on every preview.

Unvisited Link
<a href="#" class="cursor-pointer text-blue-700 underline underline-offset-2 dark:text-blue-300">
  Link
</a>
Visited Link
Δ from Defaultblue-700/blue-300 → purple-900/purple-400purple instead of blue; underline kept
<a href="#" class="cursor-pointer text-purple-900 underline underline-offset-2 dark:text-purple-400">
  Link
</a>
Δ from Default− href ⇒ :any-link stops matchingno underline, no blue, default cursor
<a>
  Placeholder
</a>
New tab Link
Δ from Default+ target="_blank"↗ from a[target="_blank"], muted zinc_blank implies rel=noopener
<a href="https://example.com" target="_blank" class="cursor-pointer text-blue-700 underline underline-offset-2 dark:text-blue-300">
  Link
</a>
Download Backup
Δ from Default+ download attribute↓ from a[download]; saves instead of navigating
<a href="/backup.zip" download class="cursor-pointer text-blue-700 underline underline-offset-2 dark:text-blue-300">
  Backup
</a>
Current page Link
Δ from Default+ aria-current="page"bold near-black, underline dropped — you are herea[aria-current] fires on any truthy token
<a href="#" aria-current="page" class="cursor-pointer text-blue-700 underline underline-offset-2 dark:text-blue-300">
  Link
</a>
External Link
Δ from Default+ rel="external"~= matches one token of the space-separated listsame ↗ family as New tab; one glyph when both apply
<a href="https://example.com" rel="external" class="cursor-pointer text-blue-700 underline underline-offset-2 dark:text-blue-300">
  Link
</a>
Δ from Default[href$=".pdf"] suffix match(PDF) appended in muted xs — label stays clean
<a href="/annual-report.pdf" class="cursor-pointer text-blue-700 underline underline-offset-2 dark:text-blue-300">
  Annual report
</a>