tailwind.configでfontSizeを拡張しようとして怒られた時の対処方法

tailwind.configの設定をしていると型のエラーで叱られました。
その時の修正方法を伝えられたらと思います！

エラー内容

semanticSizeという型のオブジェクトを作成して、configのtheme.extendのfontSizeに対して設定する記述しました。

import type { Config } from 'tailwindcss'

const semanticSize = {
  title: [fontSize['xl'], { lineHeight: '1.5' }],
  body: [fontSize['base'], { lineHeight: '1.9' }],
  annotation: [fontSize['2xs'], { lineHeight: '1.5' }],
}

const config: Config = {
  省略...
  theme: {
    extend: {
      fontSize: semanticSize
    },
  },
}

ただ、上記はエラーとなります。
エラー内容の全文を適度に改行してみました。

エラー内容

型
'{
  title: (string | { lineHeight: string; })[];
  body: (string | { lineHeight: string; })[];
  annotation: (string | { lineHeight: string; })[];
}' を

型 
'ResolvableTo<
  KeyValuePair
    <string, 
      string |
      [fontSize: string, lineHeight: string] |
      [
        fontSize: string,
        configuration: Partial<
          {
            lineHeight: string;
            letterSpacing: string;
            fontWeight: string | number;
          }
        >
      ]
    >
> | undefined'
に割り当てることはできません。

型
'{
  title: (string | { lineHeight: string; })[];
  body: (string | { lineHeight: string; })[];
  annotation: (string | { lineHeight: string; })[];
}' を

型
'KeyValuePair<
  string,
  string |
  [
    fontSize: string,
    lineHeight: string
  ] |
  [
    fontSize: string,
    configuration: Partial<
      {
        lineHeight: string;
        letterSpacing: string;
        fontWeight: string | number;
      }
    >
  ]
>'
に割り当てることはできません。

プロパティ 'title' はインデックス シグネチャと互換性がありません。
  
型 '(string | { lineHeight: string; })[]' を
型 
'string |
[fontSize: string, lineHeight: string] |
[
  fontSize: string,
  configuration: Partial<
    {
      lineHeight: string;
      letterSpacing: string;
      fontWeight: string | number;
    }
  >
]'
に割り当てることはできません。

型 '(string | { lineHeight: string; })[]' を
型 
'[
  fontSize: string,
  lineHeight: string
] |
[
  fontSize: string,
  configuration: Partial<
    {
      lineHeight: string;
      letterSpacing: string;
      fontWeight: string | number;
    }
  >
]'
に割り当てることはできません。

型 '(string | { lineHeight: string; })[]' を
型 
'[
  fontSize: string,
  configuration: Partial<
    {
      lineHeight: string;
      letterSpacing: string;
      fontWeight: string | number;
    }
  >
]'
に割り当てることはできません。

ターゲットには 2 個の要素が必要ですが、ソースに指定する数はそれより少なくても構いません。

解決策：型を変える

デフォルトの型定義のままではエラーとなってしまうので、
semanticSizeの型を変更することでエラーを解消することができます。

const semanticSize: Record<string, [string, { lineHeight: string }] | string> = {
  title: [fontSize['xl'], { lineHeight: '1.5' }],
  body: [fontSize['base'], { lineHeight: '1.9' }],
  annotation: [fontSize['2xs'], { lineHeight: '1.5' }],
}

Recordを利用してオブジェクトの型を新しく作成します。

直接書く

const config: Config = {
  省略...
  theme: {
    extend: {
      fontSize: {
        title: [fontSize['xl'], { lineHeight: '1.5' }],
        body: [fontSize['base'], { lineHeight: '1.9' }],
        annotation: [fontSize['2xs'], { lineHeight: '1.5' }],
      },
    },
  },
}

【tailwind.configでfontSizeを拡張しようとして怒られた時の対処方法】まとめ

どちらが良いのか正直判断つかないですが…不用意に型を定義するのはあまり好ましいことだとは思っていません…。

独自のルールが1つ生まれると芋蔓式に独自定義が増えていくと考えているからです…

できるだけ新しく定義しなくても書けるなら独自定義したくないので、今回のケースだと直接書くが正解だと考えています！

ケースバイケースだとは思いますが…独自定義はなるべく作らないで済むように設定や設計を進めていと考える所存です。