Tailwind プレイグラウンド
Tailwind CSS v4 のユーティリティで HTML を書き、ブラウザ内でリアルタイムにコンパイル。
Tailwind プレイグラウンドとは？
Tailwind CSS v4 のユーティリティクラスを使った HTML を書き、そのコンパイル結果をライブプレビューで確認できる無料のブラウザ内エディターです。公式の Tailwind v4 ブラウザコンパイラがページに同梱されているため、インストールは不要です。
コードはどこかにアップロードされますか？
いいえ。コンパイルはローカルにバンドルされた Tailwind エンジンにより、すべてブラウザ内で完結します。HTML がページの外に出ることはなく、下書きはブラウザの localStorage にのみ保存されます。
どの Tailwind バージョンを使っていますか？
最新のメジャーバージョン Tailwind CSS v4 を、公式の @tailwindcss/browser コンパイラで実行しています。コアのユーティリティ・バリアント・デフォルトテーマのすべてに加え、角括弧の任意値にも対応します。
ライブプレビューの仕組みは？
HTML はコンパイラと一緒にサンドボックス化された iframe に注入されます。入力のたびに 500 ミリ秒の待機後にユーティリティが再コンパイルされるため、タイプしながら常に最新のプレビューを保てます。
ダークモードのスタイルはどう試すの？
「ダークプレビュー」スイッチをオンにします。プレビュー文書に dark クラスが追加され、コンパイラは dark: バリアントをそのクラスにマッピングするので、dark:bg-slate-900 などが即座に反映されます。
Tailwind が生成した CSS は見られますか？
はい。エディター下の「コンパイル済み CSS」パネルに、マークアップから生成された正確なスタイルシートが表示され、「CSS をコピー」ボタンでクリップボードにコピーできます。
ダウンロードした HTML には何が入っていますか？
「HTML をダウンロード」ボタンは、マークアップに加えてコンパイル済み CSS を head に埋め込んだ自己完結ファイルを生成します。CDN リンクもインターネット接続も不要でオフラインで正しく表示されます。
スターターテンプレートはありますか？
あります。テンプレートセレクターには、ヒーローセクション、レスポンシブなカードグリッド、3 段階の料金表が用意され、いずれも最新の v4 ユーティリティで書かれています。最小構成の空白テンプレートもあります。
Tailwind プレイグラウンドの使い方
このプレイグラウンドは、公式の Tailwind CSS v4 ブラウザーコンパイラーを完全にあなたのマシン上で動かします。左側でユーティリティクラス付きの素の HTML を書くと、コンパイラーがサンドボックス化されたプレビュー iframe 内で対応する CSS を生成し、下のパネルに生成されたスタイルシートの正確な中身を表示します。アップロードは一切なし：コンパイラーも、あなたのマークアップも下書きも、すべてブラウザーの中に留まります。
- 「テンプレート」セレクターで起点を選びます：Hero、カードグリッド、料金表、空白。テキストは訪問の間で自動的に復元もされます。
- 左のエディターで HTML を編集します。Tab キーは半角スペース 2 つを挿入し、タイピングを止めてから約 500 ミリ秒後にプレビューが再コンパイルされます。
- 「ソフトラップ」を切り替えて折り返しを制御し、「フォントサイズ」セレクターでエディターの文字サイズを設定します。
- 「ダークプレビュー」をオンにするとプレビュー文書に dark クラスが追加され、dark:bg-slate-900 のようなユーティリティが即座に反応します。
- 「コンパイル済み CSS」パネルで生成されたルールを確認し、必要なときに「CSS をコピー」でコピーします。
- 素のマークアップには「HTML をコピー」を、コンパイル済み CSS を埋め込んだスタンドアロンファイルには「HTML をダウンロード」を。オフラインで開く準備が整います。
ダウンロードに実際のスタイルが入るのは最低 1 回コンパイルした後です。書き出す前にプレビューを一度描画させましょう。生成される CSS を減らすには、テンプレートから不要な要素を削除します。パネルは常に現在のマークアップが必要なものを正確に反映します。
関連ツール
- コードプレイグラウンド ライブプレビュー、行番号付きエディタ、キャプチャ付きコンソールを備えたオンラインHTML・CSS・JavaScriptプレイグラウンド。スニペットを即座にテストし、結果を単一のHTMLファイルとしてダウンロード。すべてブラウザ内で動作します。
- CSS Gridジェネレーター ライブプレビュー付き無料ビジュアルCSS Gridジェネレーター。レスポンシブグリッドレイアウトをインタラクティブに設計し、本番用CSSコードを即座にエクスポート。
- Chmod 計算機 無料オンラインchmod計算機でチェックボックス付きLinuxファイル権限を視覚化・計算。数値(755, 644)とシンボリック表記(rwxr-xr-x)を即座に変換。setuid、setgid、sticky bit等の特殊権限に対応。
- ASCIIコード表 10進数、16進数、8進数、2進数コード、HTMLエンティティ、文字説明を含む完全なASCII文字エンコーディングリファレンス。即座に検索・フィルタリング。
- HTTPリクエストテスター ブラウザで直接REST APIをテスト。カスタムヘッダー、ボディ、クエリパラメータでGET、POST、PUT、DELETEリクエストを送信。レスポンスのステータス、ヘッダー、JSONボディを即座に確認。
- .htaccessジェネレーター Apache .htaccessルールを生成します。リダイレクト、リライト、セキュリティヘッダー、キャッシュなど。
- Robots.txtジェネレーター 無料オンラインrobots.txtジェネレーター。robots.txtファイルを作成・カスタマイズして検索エンジンのクロールを制御、クローラーアクセスを管理、サイトのSEOを最適化します。
- サイトマップジェネレーター 無料オンラインXMLサイトマップジェネレーター。URL追加、優先度・頻度設定、SEOに優れたサイトマップを即座に作成。