如何在 Typescript 中使用 TailwindCSS 的解析配置答案

【问题标题】：How to use TailwindCSS's resolve config with Typescript如何在 Typescript 中使用 TailwindCSS 的解析配置
【发布时间】：2022-03-25 00:47:25
【问题描述】：

我将以下代码导入到我的 .tsx 组件中：

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

const fullConfig = resolveConfig(tailwindConfig)

如果我随后引用 fullConfig.theme.colors["blue"]["700"]，我会收到一条错误消息：

元素隐含地具有“任何”类型，因为“蓝色”类型的表达式不能用于索引类型“尾风主题颜色”。类型“TailwindThemeColors”上不存在属性“蓝色”。

颜色的 Tailwind 类型定义是：

export type TailwindColorValue = string | TailwindColorGroup | TailwindColorFunction;

export interface TailwindValuesColor {
    readonly [key: string]: TailwindColorValue;
}

由于类型没有明确表示“蓝色”是一个值并且它可能是一个对象，这就是错误的原因（我认为）。

我遇到的另一个问题是我的tsconfig.json 中有一个错误，因为我正在导入一个 JS 文件。添加"exclude": ["tailwind.config.js"] 并不能解决问题。

我很确定这是一个 Typescript 问题，而不是 Tailwind 问题...

我的问题是：

如何让 Typescript 了解我的顺风主题中颜色的“蓝色”属性，以及
如何阻止导入 JS 配置时出现 tsconfig 错误？

我们将不胜感激任何解决此问题的帮助。

【问题讨论】：

我遇到了同样的问题。
嗨@EricCrescioni，我最终放弃了——我认为你必须创建自定义类型
同样，我最终只是直接复制了我需要的配置部分（断点）。我正在研究一个使用顺风断点作为参数的 useMediaQuery 钩子。见下文：gist.github.com/ecam900/777898d425e9f837db035985dae1751e

标签： reactjs typescript tailwind-css tsx

【解决方案1】：

这看起来是一个问题，因为 Tailwind 已使用联合类型键入其 resolveConfig 返回值。本质上，由于联合，TS 不知道 fullConfig.theme.colors 的值是对象还是 getter 函数（同样，fullConfig.theme.colors["blue"] 是字符串、颜色组对象还是颜色函数）-大概是这个是因为这个决定留给用户的 tailwind.conf 实现选择，而 Tailwind 不会推断它。

解决此问题的最简单方法可能是编写自己的函数，该函数采用您尝试使用的联合类型值并仅返回您想要的特定类型，例如。

import _ from 'lodash';

const asColorObject = (
  input: TailwindThemeColors | undefined,
): Exclude<typeof input, Function | undefined> => {
  if (_.isFunction(input) || !input) throw new Error();
  return input;
};

const fullConfig = resolveConfig(tailwindConfig);
const colorBlue = asColorObject(fullConfig.theme.colors)['blue'];

关于为什么导入 Tailwind 配置会出现错误，请检查 TSConfig 中 compilerOptions 中的 allowJs 和 checkJS 键。否则，如果您使用 Create React App，则根本不可能这样，因为您无法从 src 文件夹之外导入文件。

【讨论】：