如何使用Tailwind和Vue.js修改MD图标的颜色

你遇到的问题本质是Vuetify内置组件样式优先级高于Tailwind默认工具类优先级导致的。v-icon组件默认自带了color属性的继承样式，权重比Tailwind普通的text-*工具类更高，所以你直接加text-yellow-400不会生效，而背景色样式不会被Vuetify默认覆盖，所以背景色设置可以正常生效。

解决方案 #

下面是几种符合你要求、仅通过Tailwind类实现的方案：

• 方案1（最便捷，无需全局配置）
  使用Tailwind自带的重要修饰符!，给颜色类添加最高优先级，直接覆盖Vuetify的内置样式：

  <v-icon v-if="link.links" class="!text-yellow-400">
      mdi-menu-down
  </v-icon>
  

• 方案2（全局适配，适合全项目大量混用Tailwind和Vuetify的场景）
  在你的tailwind.config.js配置文件中开启全局important选项：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    // 其余原有配置保持不变
    important: true,
  }
  

  配置完成后所有Tailwind工具类都会自动带上!important权重，之后你直接写text-yellow-400就可以正常修改图标颜色。

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