如何使用 typescript 访问源代码中的 tailwind 主题值

Question

我想使用打字稿访问源代码中的主题配置。由于 ，以下内容有效any，但我想正确使用 Typescript 。当我删除as anyI always 和 up withthis property doesn't exist或类似的打字稿错误时。

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../../../../tailwind.config';

const {theme: {screens}} = resolveConfig(tailwindConfig) as any;
console.log(screens.md)

删除“as any”会导致错误：

Property 'screens' does not exist on type 'UnwrapResolvables<{ extend: { colors: { "bento-main": string; "bento-bg": string; "bento-sub": string; "bento-sub-alt": string; "bento-text": string; }; content: { gear: string; }; inset: { 'shadow-spread': string; }; gap: { 'y-mansonry': string; 'x-mansonry': string; }; }; }>'.ts(2339

我猜想 tailwindcss/resolveConfig.d.ts 中的以下类型会导致 Typescript 需要 a theme.extend，而该类型在运行时不存在。因此，当我访问我的值时，打字稿不会抱怨theme.extend.，但在运行时又会失败。

type ResolvedConfig<T extends Config> = Omit<T, 'theme'> & {
  theme: UnwrapResolvables<T['theme']>
}

我想知道为什么我找不到以前做过此操作的人，因为顺风如此受欢迎并且访问主题值应该是一个非常常见的情况。你能构建一个谷歌搜索来找到执行此操作的源代码吗？和/或者您现在如何正确使用顺风的打字稿类型？

Answer 1

来自types/typings 目录中 tailwind-resolve-config.d.ts 内的这个答案

declare module 'tailwindcss/resolveConfig' {
    import type { Config } from 'tailwindcss';

    declare function resolveConfig(config: Config): Config;
    export = resolveConfig;
}