我将以下代码导入到我的.tsx组件中:
import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../../../tailwind.config.js';
const fullConfig = resolveConfig(tailwindConfig)
如果我引用fullConfig.theme.colors["blue"]["700"]
,会出现错误消息:
元素隐式具有“any”类型,因为类型““blue”“的表达式不能用于索引类型”TailwindThemeColor“。类型”TailwindThemeColor“上不存在属性”blue“。
颜色的顺风类型定义为:
export type TailwindColorValue = string | TailwindColorGroup | TailwindColorFunction;
export interface TailwindValuesColor {
readonly [key: string]: TailwindColorValue;
}
由于类型没有明确说明“blue”是一个值,它可能是一个对象,这就是错误的原因(我认为)。
我遇到的另一个问题是tsconfig.json
中的一个错误,因为我正在导入一个JS文件。添加"exclude": ["tailwind.config.js"]
并不能解决这个问题。
我敢肯定这是一个 typescript 问题,而不是顺风问题...
我的问题是:
1.如何使Typescript识别顺风主题中颜色的“blue”属性,以及
1.如何阻止导入JS配置时出现tsconfig错误?
我们将非常感谢您在解决此问题方面的任何帮助。
3条答案
按热度按时间9gm1akwq1#
这看起来是由于Tailwind输入其
resolveConfig
返回值时使用的联合类型导致的问题。(同样地,无论fullConfig.theme.colors["blue"]
是字符串,color-group对象或颜色函数)-大概这是因为这个决定留给用户的tailwind.conf实现选择,而Tailwind并不推断它。解决这个问题最简单的方法可能是编写您自己的函数,该函数接受您试图使用的联合类型的值,并只返回您想要的特定类型,例如。
至于为什么导入Tailwind配置时会出错,请检查TSConfig中
compilerOptions
中的allowJs
和checkJS
键。否则,如果您使用Create React App,则根本不可能这样做,因为您无法从src
文件夹之外导入文件。ncecgwcz2#
我想也许你可以用tailwind默认的config类型来解决,这样:
wvmv3b1j3#
回答最初的问题#1。
不知何故, typescript 不能给予你正确的打字时这样做:
所以我想,我实际上只需要
theme
(content
只是Config
类型中需要的),结果如下:这里唯一的问题是我不能在配置文件本身中有
/** @type {import('tailwindcss').Config} */
,因为IDE从那里开始解析类型,而不是配置对象。至于第二个问题,我相信在
tsconfig.json
的compilerOptions
中添加"allowJs": true
就可以了。