tailwind.config.js で Typescript 型を使用する方法

Tailwind-CSS 構成に Typescript を使用する

更新: Tailwind 3.3+ は TypeScript を直接使用できます

このブログ投稿は、リリース 3.3 で時代遅れになりました。 Tailwind-CSS は、TypeScript ファイルとしての構成ファイルの使用をサポートするようになりました。 Tailwind-CSS は独自のプリプロセッサを使用するため、既存の TypeScript セットアップとは干渉しません。

import type { Config } from 'tailwindcss'

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

typescriptLanguageCheck out all coding posts

このリンクでリリースノートを見つけることができます。

原著

Tailwind には、その構成ファイルの型が付属しています。それらを使用するには、次の 2 つの簡単な手順を実行するだけです。

Tailwind-CSS 3.1 以降に更新する

最初の要件は、Tailwind-CSS 依存関係を少なくとも 3.1 のバージョンに更新することです。これは、型の出荷を開始したバージョンであるためです。

構成ファイルを更新する

2 番目で最後のステップは、「型注釈」と呼ばれる単一の特別なコメントを、エクスポートされた構成に追加することです。 Typescript の優れた機能は、Javascript ファイルでも使用できることです。型を含むモジュールを参照できる限り、IDE はこのメタデータを使用して型チェックのオートコンプリートを行うことができます。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // The source of your files, e.g. "./src/**/*.{html,js,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}