tailwind-css - 如何更改tailwind css中的下划线颜色

Question

Tailwind css 中的默认下划线颜色是黑色。例如，如何将此颜色更改为浅绿色。
他们列出了一种更改基本样式中默认链接下划线颜色的方法，如下所示

@tailwind base;

a {
  color: theme('colors.blue');
  text-decoration: underline;
}

@tailwind components;
@tailwind utilities;

如何更改默认的正常下划线颜色，例如 span标签

Answer 1

使用默认的 tailwindcss 构建无法做到这一点。
有两种方法可以覆盖下划线颜色

在全局 CSS 文件上使用简单的 CSS
.下划线{
文字装饰颜色:红色；
文字装饰:下划线；
}

使用 tailwindcss 配置文件扩展下划线 tailwind.config.css

module.exports = {
    theme: {
        extend: {}
    },
    variants: {},
    plugins: [
        function ({addUtilities}) {
            const extendUnderline = {
                '.underline': {
                    'textDecoration': 'underline',
                    'text-decoration-color': 'red',
                },
            }
            addUtilities(extendUnderline)
        }
    ]
}