如何在Tailwind CSS中更改下划线的颜色

Question

在 Tailwind CSS 中，默认的下划线颜色是黑色。如果我想将其更改为浅绿色，该怎么做呢？他们列出了一种在基础样式中更改默认链接下划线颜色的方法，如下所示：

@tailwind base;

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

@tailwind components;
@tailwind utilities;

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

- Taio

Answer 1

使用默认的 tailwindcss 构建无法实现这一点。

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

1. 在全局 CSS 文件中使用简单的 CSS。

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

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

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

- Enrique Chavez

---

文件应该是 tailwind.config.js，而不是 tailwind.config.css。 - ihojmanb

这在Tailwind v3中是可能的。 https://tailwindcss.com/docs/text-decoration-color - Joe Reynolds

Answer 2

如果您正在使用Tailwind的v3版本，您可以使用decoration-{color}。 例如：

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

这里是文档：https://tailwindcss.com/docs/text-decoration-color

- Joe Reynolds