使用自定义Tailwind预设与TypeScript时，类型报错的优雅解决方法问询

自定义Tailwind预设文件 #

// 移除手动指定的类型注释，让TypeScript自动推导配置类型
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          25: "#F0F9F9",
          50: "#E1F4F3",
          100: "#C3EAE7",
          200: "#A4DFDA",
          300: "#86D5CF",
          400: "#68CAC3",
          500: "#4ABFB8",
          600: "#3AA69F",
          700: "#308882",
          800: "#256A65",
          900: "#1B4B48",
        }
      },
    },
  },
  plugins: [],
};

应用中的Tailwind配置文件 #

import sharedConfig from "@our_repo/tailwind-config";

// 移除手动指定的Pick类型注释，让TS自动合并预设类型与当前配置
export default {
  content: ["./src/app/**/*.tsx"],
  presets: [sharedConfig],
};

问题描述 #

执行类似console.log(tailwindConfig.theme.colors.primary["500"])的代码时，控制台能正确打印颜色值，但TypeScript编译器报错：Property 'primary' does not exist on type 'DefaultColors'。需要无需专门为预设声明新类型的优雅解决方法。

优雅解决方案 #

核心问题在于手动指定的类型注释（Omit<import('tailwindcss').Config, 'content'>和Pick<import('tailwindcss').Config, 'content', 'presets'>）覆盖了TypeScript对自定义扩展类型的自动推导，导致编译器无法识别primary颜色。

方法1：移除手动类型注释（推荐） #

直接删除预设文件和应用配置文件中的@type类型注释，让TypeScript自动推导完整的配置类型。这样导入sharedConfig时，其类型会包含你扩展的primary颜色集合，应用配置合并后，tailwindConfig的类型也会自动包含这些自定义属性，不会再出现类型报错。

方法2：利用typeof推导类型（如需保留类型注释） #

如果必须保留类型注释，可以通过typeof引用预设的实际类型，避免手动限定范围：

/** @type {import('tailwindcss').Config & { presets: [typeof sharedConfig] }} */
import sharedConfig from "@our_repo/tailwind-config";

export default {
  content: ["./src/app/**/*.tsx"],
  presets: [sharedConfig],
};

这种方式会让TypeScript合并默认的Config类型和预设的实际类型，从而识别primary颜色。

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