Tailwind CSS visited变体对外部链接不生效的原因及解决方法

我给链接添加了visited:text-red-500样式，站内链接能正常生效，但指向外部域名的链接完全没效果。试过给链接或父级元素加.no-tailwind { all: unset; }类，问题依旧存在。

代码示例：

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<p>
  此链接生效：
  <a href="https://mysite/somepage" class="visited:text-red-500">站内链接</a>
</p>

<p>
  此链接不生效：
  <a href="https://google.com" class="visited:text-red-500">外部链接</a>
</p>

原因 #

这是浏览器隐私保护机制导致的：为了防止网站通过visited伪类检测用户的浏览历史（比如判断用户是否访问过特定外部站点），浏览器对跨域（外部域名）链接的visited伪类应用做了严格限制。多数浏览器要么直接忽略跨域链接的visited样式，要么仅允许修改极少数样式属性，Tailwind的visited:text-red-500样式会被浏览器的隐私策略拦截。

解决方法 #

• 放弃依赖跨域链接的visited伪类：这是最直接的方案，浏览器的隐私限制无法绕过，强行尝试会带来兼容性问题。
• 通过站内跳转中转外部链接：将外部链接指向站内跳转页面（比如/redirect?url=https://google.com），再由该页面跳转到外部网站。此时链接属于站内同源，visited样式可正常生效。
• 用JS模拟visited效果：监听外部链接的点击事件，给点击过的链接添加自定义类，再通过CSS设置对应样式，还可借助localStorage保留状态：

<script>
  // 筛选所有非本站的外部链接
  document.querySelectorAll('a[href^="https://"]:not([href*="mysite"])').forEach(link => {
    // 点击时添加标记类
    link.addEventListener('click', () => {
      link.classList.add('clicked');
      localStorage.setItem(`visited_${link.href}`, 'true');
    });
    // 页面加载时恢复已点击状态
    if(localStorage.getItem(`visited_${link.href}`)) {
      link.classList.add('clicked');
    }
  });
</script>

<style>
  .clicked {
    color: rgb(239 68 68); /* 对应Tailwind的text-red-500颜色值 */
  }
</style>

内容的提问来源于stack exchange，提问作者Walter81