如何修改Tailwind CSS下划线颜色？含span标签默认样式修改

这个问题其实和你修改a标签下划线的思路是相通的，核心就是在Tailwind的基础样式层（base）里针对目标元素调整样式，或者自定义工具类来实现灵活控制。我给你分几种常用场景来拆解：

1. 全局覆盖所有span的下划线颜色 #

如果你希望所有带下划线的span（不管是浏览器默认样式还是手动加了underline类的）都统一用浅绿色，直接在@tailwind base之后添加样式即可：

@tailwind base;

/* 用Tailwind内置的浅绿色，或者替换成你自己的颜色值 */
span {
  text-decoration-color: theme('colors.green.300');
}

@tailwind components;
@tailwind utilities;

2. 只针对加了underline类的span #

如果不想影响所有span，只想给主动添加了Tailwindunderline类的元素改颜色，就用类选择器精准匹配：

@tailwind base;

span.underline {
  text-decoration-color: theme('colors.green.300');
}

@tailwind components;
@tailwind utilities;

3. 自定义专属浅绿色+灵活工具类（推荐） #

如果你的浅绿色是项目特有的，先在tailwind.config.js里注册自定义颜色：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        'soft-green': '#86efac', // 替换成你想要的浅绿色十六进制代码
      },
    },
  },
  plugins: [],
}

接下来有两种选择：

• 继续在base层覆盖指定元素：

span.underline {
  text-decoration-color: theme('colors.soft-green');
}

• 或者自定义一个工具类，这样你不仅可以给span用，其他元素也能复用：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .underline-soft-green {
    text-decoration-color: theme('colors.soft-green');
  }
}

使用的时候就这么写：<span class="underline underline-soft-green">我是带自定义浅绿色下划线的文本</span>

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