【问题标题】:How can I change the underline color in tailwind css如何更改顺风 css 中的下划线颜色
【发布时间】:2020-08-01 20:29:38
【问题描述】:

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

@tailwind base;

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

@tailwind components;
@tailwind utilities;

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

【问题讨论】:

    标签: tailwind-css


    【解决方案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)
              }
          ]
      }
      

    【讨论】:

    【解决方案2】:

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

    例如:

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

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

    【讨论】:

      猜你喜欢
      • 2012-09-15
      • 2018-09-11
      • 2021-03-10
      • 2015-04-08
      • 2017-07-23
      • 1970-01-01
      • 1970-01-01
      • 2021-04-30
      相关资源
      最近更新 更多