型付きで tailwind.config.js を書く

tailwindcss は型を提供していないようだったので、自分でを作りました。主にtailwindcss.d.tsの中にあるTailwindcssConfigurationを使います。

準備

以下で型定義を持ってきます。

yarn add -D @nju33/tailwindcss.d.ts

設定ファイルを書く

tailwind.config.jsを作り以下のように書き始めます。

/**
 * @type {import('@nju33/tailwindcss.d.ts').TailwindcssConfiguration}
 */
module.exports = {
  theme: {
    fill: theme => theme('colors')
  }
};

@typeの行でmodule.exportsオブジェクトに対して、「これはTailWindConfigurationだよ」と設定してます。これにより例えば、theme.screensオブジェクトにキーを書こうという時にmdlgなどがサジェストされるようになるはずです。