TailwindCSS 3.0 配置TS解析

问题

How to use TailwindCSS's resolve config with Typescript

I'm importing the following code into my .tsx component:

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

const fullConfig = resolveConfig(tailwindConfig)

If I then reference fullConfig.theme.colors["blue"]["700"] I get an error saying:

Element implicitly has an 'any' type because expression of type '"blue"' can't be used to index type 'TailwindThemeColors'. Property 'blue' does not exist on type 'TailwindThemeColors'. ...

解决方案

使用Tailwind 3.0提供的 TailwindDefaultConfig 类型作为解析类型：

import resolveConfig from 'tailwindcss/resolveConfig'
import tailwindConfig from 'tailwind.config'
import { TailwindConfigDefault } from 'tailwindcss/tailwind-config-default'
import { TailwindConfig } from 'tailwindcss/tailwind-config'

export default resolveConfig(tailwindConfig as TailwindConfig) as TailwindConfigDefault & {
  theme: {
    colors: {
      main: {
        light: 'var(--color-main-light)'
        dark: 'var(--color-main-dark)'
      }
    }
  }
  // 其他自定义配置
}