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

Question

tailwind 中的默认下划线颜色 css 是黑色。我怎样才能将这种颜色更改为浅绿色。他们列出了一种更改基本样式中默认 link 下划线颜色的方法，如下所示

@tailwind base;

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

@tailwind components;
@tailwind utilities;

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

Answer 1

使用默认的 tailwindcss 构建无法做到这一点。

有两种方法可以覆盖下划线颜色：

在全局 CSS 文件上使用简单 CSS

.underline {
    text-decoration-color: red;
    text-decoration: underline;
}

使用 tailwind.config.js 配置文件扩展下划线：

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

Answer 2

如果您使用的是 tailwind v3，您可以使用 decoration-{color}。

例如：

<a href="#" class="underline decoration-green">
    my link text
</a>

文档如下： https://tailwindcss.com/docs/text-decoration-color

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

How can I change the underline color in tailwind css

tailwind-css