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

Question

我想使用打字稿访问源代码中的主题配置。 由于

any

，以下内容有效，但我想正确使用 Typescript。当我删除

as any

时，我总是会遇到

this 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 需要一个

theme.extend

，而它在运行时不存在。因此，当我访问我的

theme.extend.

值时，打字稿不会抱怨，但在运行时又会失败。

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

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

Answer 1

从此 answer 位于您的 types/typings 目录中的 tailwind-resolve-config.d.ts 中

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

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