Tailwind CSS設定生成ツール
オンラインで利用できるTailwind CSS設定生成ツール。インストール不要。ビジュアルなtailwind.config.js構築ツール
Tailwind 設定ジェネレーターについて
このツールは、簡単なフォームでそのまま使える Tailwind CSS の設定ファイルを作成し、JavaScript を手書きする手間を省きます。クラスのプレフィックスを設定し、important フラグを切り替え、Tailwind が走査すべき content パスを並べます。カスタムカラーやフォントファミリーを追加でき、ジェネレーターがそれらをきれいな theme.extend ブロックにまとめます。すべてが 1 つの tailwind.config.js にまとまり、プロジェクトへそのままコピーできます。
使い方
1. 基本タブで、プレフィックス、important フラグ、content パスを設定します 2. カラータブで、各カスタム色の名前と値を追加します 3. フォントタブで、各フォントファミリーとカンマ区切りのスタックを追加します 4. 出力タブを開き、生成をクリックします 5. ファイルを確認し、プロジェクトにコピーします
より良い結果のためのヒント
content パスは 1 行に 1 つずつ書き、Tailwind が正しいファイルを走査してクラス名を集められるようにします。カスタム色は bg-primary や text-brand のようなユーティリティクラスになり、フォント項目は font-sans など任意の名前になります。空のセクションは自動で省略されるため、色やフォントだけを埋めても生成ファイルは整います。出力は先頭に Tailwind の型ヒントを付けたモダンな ESM エクスポート形式です。
▶プレフィックスオプションは何をしますか?
▶important フラグとは何ですか?
▶content パスはどう使われますか?
▶フォントファミリーを追加するには?
▶出力形式は何ですか?
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。