在 Tailwind CSS 中,默认的下划线颜色是黑色。如果我想将其更改为浅绿色,该怎么做呢?他们列出了一种在基础样式中更改默认链接下划线颜色的方法,如下所示:
@tailwind base;
a {
color: theme('colors.blue');
text-decoration: underline;
}
@tailwind components;
@tailwind utilities;
如何更改默认下划线颜色,例如span标签?
在 Tailwind CSS 中,默认的下划线颜色是黑色。如果我想将其更改为浅绿色,该怎么做呢?他们列出了一种在基础样式中更改默认链接下划线颜色的方法,如下所示:
@tailwind base;
a {
color: theme('colors.blue');
text-decoration: underline;
}
@tailwind components;
@tailwind utilities;
如何更改默认下划线颜色,例如span标签?
使用默认的 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)
}
]
}
decoration-{color}
。
例如:<a href="#" class="underline decoration-green">
my link text
</a>
tailwind.config.js
,而不是tailwind.config.css
。 - ihojmanb