Tailwind-CSS 構成のタイプ
Tailwind-CSS で Typescript 型を使用する方法
Tom • 学習 •
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
このリンクでリリースノートを見つけることができます。
原著
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: [],
}
そして、これらの小さな変更により、Tailwind-CSS 構成で最高の型がサポートされるようになりました。
行動
Feedback
提案された投稿