问题原因 #

你遇到的核心问题是：在配置文件中定义别名颜色时，你引用的是从tailwindcss/colors导入的原始颜色对象，而不是Tailwind最终扩展后的主题颜色。

当你在theme.extend.colors中覆盖cyan.400时，这是Tailwind在解析配置阶段才会合并到最终主题的修改。但你的button-primary-default-bg.dark属性值是在JavaScript执行配置对象时就已经确定的——它直接使用了导入的colors.cyan[400]（即原始的#22d3ee），完全没有关联到你后续在theme.extend中对cyan的覆写。

解决方案 #

要让别名颜色引用到你自定义的cyan.400，你需要手动构建包含覆写的颜色对象，并在别名和主题扩展中统一引用这个对象，而不是依赖Tailwind的自动扩展来同步值。

方案1：预构建自定义颜色对象（推荐）

先创建一个包含你修改的cyan的自定义颜色对象，然后在theme.extend.colors和别名中都引用这个对象：

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

// 1. 手动构建修改后的cyan颜色对象
const customCyan = {
  ...colors.cyan,
  400: "#01C5D1", // 你的自定义cyan.400
};

module.exports = {
  content: ["./app/views/**/*.{erb,html}"],
  darkMode: "selector",
  theme: {
    extend: {
      colors: {
        ...colors, // 保留其他Tailwind默认颜色
        cyan: customCyan, // 应用自定义cyan到主题
        "button-primary-default-bg": {
          DEFAULT: colors.blue[600], // 浅色模式使用默认Tailwind blue.600
          dark: customCyan[400], // 深色模式直接引用预构建的自定义cyan.400
        },
      },
    },
  },
  plugins: [],
};

方案2：直接替换完整主题颜色对象

如果你希望完全掌控所有颜色（而不是扩展），可以构建一个完整的自定义颜色对象，包含所有默认颜色、你的覆写和别名，然后直接赋值给theme.colors：

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

// 1. 构建包含所有自定义修改的完整颜色对象
const customColors = {
  ...colors, // 保留所有默认Tailwind颜色
  cyan: {
    ...colors.cyan,
    400: "#01C5D1", // 覆写cyan.400
  },
  "button-primary-default-bg": {
    DEFAULT: colors.blue[600],
    dark: customColors.cyan[400], // 引用自定义后的cyan.400
  },
};

module.exports = {
  content: ["./app/views/**/*.{erb,html}"],
  darkMode: "selector",
  theme: {
    colors: customColors, // 直接使用完整的自定义颜色对象
    extend: {
      // 其他需要扩展的主题配置（如字体、间距等）
    },
  },
  plugins: [],
};

验证步骤 #

1. 保存修改后的tailwind.config.js
2. 清除CSS构建缓存（例如重启开发服务器、删除生成的CSS文件）
3. 重新编译你的CSS
4. 切换到深色模式，检查使用theme('colors.button-primary-default-bg.dark')的元素背景色是否变为#01C5D1

额外提示 #

• 不要依赖Tailwind的theme()函数在配置文件中引用扩展后的颜色——theme()是Tailwind运行时解析主题的工具，无法在配置对象的属性值中直接使用。
• 如果你后续需要修改cyan.400，只需要在预构建的customCyan或customColors中修改一次，所有引用它的地方都会同步更新，无需重复修改。

内容来源于stack exchange