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

Question

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

@tailwind base;

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

@tailwind components;
@tailwind utilities;

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

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)
           }
       ]
   }
   

Answer 2

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

例如：

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

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