如何在Tailwind预设中访问自定义配置的新颜色？

当你使用Tailwind默认调色板时，确实可以通过require("tailwindcss/colors")调用官方颜色，但自定义颜色并不在这个默认集合里，所以直接用colors.newcolor[100]会报错。下面是两种可行的解决方法：

方法1：将自定义颜色抽离为独立模块（推荐） #

把自定义颜色单独放在一个文件中，让主配置和预设都能导入这个文件，避免重复代码和循环引用问题。

1. 创建自定义颜色文件（比如./custom-colors.js）：

// ./custom-colors.js
module.exports = {
  newcolor: {
    100: '#f0f9ff',
    200: '#e0f2fe',
    300: '#bae6fd',
    // 按需添加其他色阶
  }
};

2. 在Tailwind主配置文件中导入并使用：

const tailwindDefaultColors = require("tailwindcss/colors");
const customColors = require("./custom-colors");

module.exports = {
  // 引入预设
  presets: [require("./my-preset.js")],
  theme: {
    colors: {
      // 可选：保留默认颜色的话，合并默认色和自定义色
      ...tailwindDefaultColors,
      ...customColors,
    },
  },
};

3. 在预设文件（比如./my-preset.js）中导入自定义颜色并使用：

const customColors = require("./custom-colors");

module.exports = {
  theme: {
    colors: {
      support: customColors.newcolor[100]
    },
  },
};

方法2：在预设中重复定义自定义颜色（不推荐） #

如果不想额外创建文件，可以在预设里直接重新定义自定义颜色，但这种方式会导致代码重复，后续维护时需要同时修改主配置和预设，容易出错：

// 预设文件 my-preset.js
module.exports = {
  theme: {
    colors: {
      // 直接使用自定义色阶值
      support: '#f0f9ff',
      // 或者完整定义newcolor后引用
      newcolor: {
        100: '#f0f9ff',
        200: '#e0f2fe',
      },
      support: '#f0f9ff' // 直接写色值比引用更稳妥，避免作用域问题
    },
  },
};

注意：Tailwind的预设加载优先级高于主配置，所以如果预设和主配置中定义了相同的颜色项，预设中的值会被主配置覆盖（除非主配置使用extend而不是直接覆盖theme.colors）。

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