如何在Tailwind中对current color使用lighten()、darken()处理SVG及按钮状态？

方法一：用CSS color-mix 精准控制颜色加深 #

这种方法直接修改按钮文本颜色，SVG通过stroke-current自动继承变化后的颜色，不会影响按钮其他元素（比如背景）的样式。

1. 按钮样式（结合Tailwind）：

.btn {
  @apply text-gray-700 transition-colors duration-200; /* 基础文本色+过渡动画 */
}

.btn:hover, .btn:focus {
  color: color-mix(in srgb, currentColor, black 10%); /* 混合10%黑色实现颜色加深 */
}

2. SVG保持基础设置即可，无需单独写hover状态：

svg {
  @apply stroke-current;
}

方法二：用CSS滤镜快速实现整体变暗 #

如果按钮仅包含文本和SVG，没有需要保留亮度的其他元素，用filter可以快速实现整体颜色加深，代码更简洁：

.btn {
  @apply text-gray-700 transition-all duration-200;
}

.btn:hover, .btn:focus {
  filter: brightness(0.9); /* 亮度降低10%，等效颜色加深 */
}

svg {
  @apply stroke-current;
}

关键注意点 #

• 不需要给SVG单独设置hover样式，stroke-current会自动继承父元素（按钮）的currentColor，按钮颜色变化时SVG描边会同步更新。
• 若要调整效果，可修改color-mix参数（比如替换black为white实现颜色变亮），或更换filter属性（比如contrast(1.1)提高对比度）。

内容的提问来源于stack exchange，提问作者Hik200