tailwind.config.tsでtypographyにtheme関数を使う場合の型定義

Markdownの記事や外部APIから取得したHTMLをTailwind CSSでスタイリングする際には @tailwindcss/typography がとても便利です。

デフォルトのTypograhyをカスタマイズするとき、Tailwindの設定ファイルの中で theme() 関数を使いたい場面があると思います。

しかし設定ファイルをTypeScriptで書いていると、このtheme()の型定義でエラーになってしまいました。以前少しハマったので解決策を備忘録として残しておきます。

まずはエラーになる例です。
theme関数の型定義がないため、themeの型がanyになってしまっています。

import type { Config } from 'tailwindcss';

const config = {
  theme: {
    extend: {
      // Parameter 'theme' implicitly has an 'any' type. のエラーが出る
      typography: (theme) => ({
        DEFAULT: {
          css: {
            a: {
              color: theme('colors.indigo.800'),
            },
          },
        },
      }),
    },
  },
  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
} satisfies Config;

export default config;

これを回避するために、themeの型を指定する必要があります。 tailwindcss/types/config に PluginAPI という型が定義されているので、これを使って型を指定しましょう。

import type { Config } from 'tailwindcss';
import { PluginAPI } from 'tailwindcss/types/config';

const config = {
  theme: {
    extend: {
      typography: (theme: PluginAPI['theme']) => ({
        DEFAULT: {
          css: {
            a: {
              color: theme('colors.indigo.800'),
            },
          },
        },
      }),
    },
  },
  plugins: [require('@tailwindcss/typography')],
} satisfies Config;

export default config;

これで無事エラーが解消されました。

この内容は以下のIssueで解説されていたものです。

https://github.com/tailwindlabs/tailwindcss/discussions/11238#discussioncomment-6120287

困ったときはちゃんとGitHubのIssueを読みましょう。（自戒）