Tailwind CSS插件开发：matchUtilities与theme的TS类型问询

核心问题修正 #

你代码里的TypeScript错误源于用any模糊定义matchUtilities和theme，Tailwind CSS本身提供了完整的类型定义，直接导入使用即可消除类型报错。

完整修正代码 #

import plugin from 'tailwindcss/plugin';
import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
import type { Config, PluginAPI } from 'tailwindcss';

// 定义你要使用的自定义颜色键（需与theme中定义的颜色键对应）
type CustomColorKeys = "wh" | "bla" | "ora" | "gra";

const config: Config = {
  theme: {
    colors: {
      wh: '#ffffff',
      bla: '#000000',
      ora: '#ff7d00',
      gra: '#808080',
      white: '#ffffff'
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, theme }: PluginAPI) {
      matchUtilities(
        {
          // value类型与values参数的类型对应，这里为颜色值字符串
          'my-custom-class': (value: string) => ({
              backgroundColor: value,
              color: theme('colors.white'),
          }),
        },
        { 
          // 约束values仅包含自定义的颜色键与对应值
          values: flattenColorPalette(theme('colors')) as Record<CustomColorKeys, string> 
        }
      );
    }),
  ],
};

export default config;

关键类型说明 #

• PluginAPI：Tailwind官方提供的插件上下文类型，包含matchUtilities、theme等所有插件方法的完整类型定义，直接解构使用即可替代any。
• theme方法：支持泛型约束返回值类型，比如theme<string>('colors.white')可获得更精确的类型提示。
• matchUtilities参数约束：第二个参数的values决定了第一个参数中工具类函数的value类型，用Record<CustomColorKeys, string>可限制仅能使用你定义的颜色键。

额外注意事项 #

• 统一使用ES模块导入（import）替代CommonJS（require），避免混合模块语法导致的类型冲突。
• 自定义颜色键需在theme.colors中对应定义，否则flattenColorPalette无法获取到对应颜色值。

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