`tailwindcss/tailwind-config`已移除，如何导入Tailwind类型？

Tailwind CSS v3+ 重构了类型系统，移除了tailwindcss/tailwind-config这个导出路径，相关类型已合并到主包的类型声明中，以下是两种可行的修复方案：

方案一：通过Config类型推导（推荐，贴合自定义配置） #

直接从tailwindcss导入Config类型，再从中提取颜色相关的类型，适配性更强：

import resolveConfig from 'tailwindcss/resolveConfig'
import type { Config } from 'tailwindcss'
import tailwindConfig from '../../tailwind.config'

// 从Tailwind全局配置类型中提取颜色配置类型
type TailwindColorConfig = Config['theme']['colors']
// 提取单个颜色组的层级类型（如primary对应的50-900结构）
type TailwindColorGroup = NonNullable<TailwindColorConfig>['primary']

export interface ThemeColorConfig extends TailwindColorConfig {
  primary: TailwindColorGroup
}

export const useThemeColors = (): ThemeColorConfig => {
  const twConfig = resolveConfig(tailwindConfig)
  if (!twConfig?.theme?.colors) throw new Error('Missing Tailwind config')
  return twConfig.theme.colors as ThemeColorConfig
}

方案二：直接导入重命名后的类型 #

如果你的Tailwind版本是v3.1及以上，可以直接导入主包中暴露的颜色类型：

import resolveConfig from 'tailwindcss/resolveConfig'
import type { ColorConfig, ColorGroup } from 'tailwindcss'
import tailwindConfig from '../../tailwind.config'

export interface ThemeColorConfig extends ColorConfig {
  primary: ColorGroup
}

export const useThemeColors = (): ThemeColorConfig => {
  const twConfig = resolveConfig(tailwindConfig)
  if (!twConfig?.theme?.colors) throw new Error('Missing Tailwind config')
  return twConfig.theme.colors as ThemeColorConfig
}

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