Tailwind Prose：如何编辑链接的颜色样式？

问题核心是你写错了类名组合逻辑，导致容器hover时触发所有链接变色。以下是正确实现方式：

方法1：使用正确的组合类 #

给文章容器添加如下类名：

<div class="prose prose-a:hover:text-cyan-500">
  <!-- 文章内容 -->
</div>

该写法生成的CSS选择器为.prose a:hover { color: #06b6d4; }，只有当鼠标悬停在链接本身时才会触发颜色变化，不会出现容器hover时所有链接变色的问题。

注意：不要写成prose:hover prose-a:text-cyan-500，这种写法会让容器hover时所有链接统一变色，正是你遇到的错误场景。

方法2：全局统一配置（推荐） #

如果需要所有prose容器内的链接都使用该hover样式，直接在Tailwind配置文件中扩展typography：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            a: {
              color: '#3b82f6', // 可自定义链接默认颜色，示例为blue-500
              '&:hover': {
                color: '#06b6d4', // cyan-500的十六进制值
              },
            },
          },
        },
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

配置完成后，所有带prose类的容器里的链接，都会在自身被hover时自动变色，无需额外添加类名。

方法3：单个链接自定义样式 #

如果只需给特定链接设置hover效果，直接给该链接添加类名即可：

<div class="prose">
  <p>这是一段包含<a href="#" class="hover:text-cyan-500">自定义hover样式的链接</a>的文本。</p>
</div>

内容的提问来源于stack exchange，提问作者Zack Plauché