Tailwind Config Builder

Tailwind Config Builderは、コードを手動で書くことなく tailwind.config.jsファイルをビジュアルに作成・カスタマイズ できる無料のブラウザベースツールです。正確な設定構文を 記憶する代わりに、カラー、スペーシング値、フォントファミリー、 ブレークポイントのフォームフィールドに入力するだけで、 すぐに使える設定ファイルが生成されます。

拡張（extend）モード（デフォルトのTailwind CSS値をすべて 保持し、カスタム値を追加）と上書き（override）モード （デフォルトを完全に置き換え）を選択できます。この違いは Tailwind設定で最も誤解されやすい部分の一つですが、 ビルダーではトグル一つで明確になります。

Generalタブでは、ダークモード戦略（classまたはmedia）を 設定し、既存プロジェクトへのTailwind統合時の競合を避ける ためのクラスプレフィックスを任意で追加できます。すべての 変更は即座に出力に反映されるため、素早く反復できます。

すべての処理はブラウザ内で完全に実行されます。データは サーバーに一切送信されず、アカウントも不要です。

このツールは、ユーティリティクラスをリアルタイムでテスト するためのTailwind CSS Playground、 既存のCSSをTailwindに移行するための Tailwind CSS Converter、 Tailwindテーマを補完するデザイントークンシステムを 構築するためのCSS Variable Generatorと 組み合わせて使えます。

1. Colorsタブを開き、Add Colorをクリックしてカスタムテーマカラーを定義します。名前（例：primary）を入力し、HEX値を選択または入力します。
2. Spacingタブに切り替えてカスタムスペーシング値を追加します。キー（例：72）とCSS値（例：18rem）を入力します。
3. Fontsタブで、名前（例：sans）とカンマ区切りのフォントファミリーリストを指定してフォントファミリーを追加します。
4. Breakpointsタブで、xs: 475pxや3xl: 1920pxなどのカスタムスクリーンサイズを定義します。
5. Generalタブで、Extend（デフォルトに追加）またはOverride（デフォルトを置換）を選択し、ダークモード戦略を設定し、任意でクラスプレフィックスを追加します。
6. 右側（モバイルでは下部）の出力パネルで生成されたtailwind.config.jsを確認します。
7. CopyをクリックまたはCtrl+Shift+Cを押してクリップボードにコピーします。Downloadをクリックしてファイルを直接保存します。