如何在Angular应用中修改Tailwind CSS主色调

场景1：扩展Tailwind颜色主题（推荐） #

如果希望用更符合Tailwind规范的方式管理颜色，同时支持类似text-primary的类名（也可兼容你的命名习惯），直接在tailwind.config.js的主题扩展中定义主色调：

1. 打开项目根目录的tailwind.config.js
2. 在theme.extend.colors中添加自定义颜色配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          default: '#2563eb', // 替换为你需要的颜色值
          // 可额外添加同色系变体，比如浅色调、深色调
          light: '#3b82f6',
          dark: '#1d4ed8'
        }
      }
    },
  },
  plugins: [],
}

3. 配置完成后，你可以在HTML中使用text-primary（对应primary.default）、text-primary-light这类类名，无需自定义color-primary-default。若要保留原有类名，可参考场景2。

场景2：自定义工具类（适配现有color-primary-default类） #

如果不想修改现有HTML代码中的color-primary-default类，可通过Tailwind插件添加自定义工具类：

1. 修改tailwind.config.js的plugins数组：

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.color-primary-default': {
          color: '#2563eb', // 替换为目标颜色值
        }
      })
    }
  ],
}

最后步骤 #

修改配置后，重启Angular开发服务器（停止当前ng serve进程后重新启动），确保Tailwind重新生成样式文件，新的颜色配置即可生效。

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