Tailwind CSSプレイグラウンド

Tailwind CSSプレイグラウンドは、Tailwind CSSユーティリティクラスを 試して結果を即座に確認できる無料のブラウザベースツールです。Tailwindを 初めて学ぶ方、コンポーネントのプロトタイピング、正しいクラス名を思い出したい 場合など、開発サーバーを起動することなく即時のビジュアルフィードバックを 得ることができます。

すべての処理はブラウザ内で完全に行われます。プレビュー要素はサイトの既存の スタイルシートからの実際のTailwind CSSクラスでレンダリングされ、計算済み スタイルパネルはネイティブのgetComputedStyle() APIを使用して、 どのCSSプロパティが適用されているかを正確に表示します。データがサーバーに 送信されることはありません。

このツールには、レイアウト、フレックスボックス、グリッド、スペーシング、 サイジング、タイポグラフィ、カラー、ボーダー、エフェクトなど、カテゴリ別に 整理された数百の一般的なTailwindクラスのオートコンプリートシステムが 含まれています。入力を開始すると候補が自動的に表示されます。また、下部の クイックリファレンスグリッドをブラウズしてクリックでクラスを追加することも できます。

レスポンシブプレビュー切り替えを使用して異なるビューポート幅でスタイルを テストしたり、ライトとダークのプレビュー背景を切り替えたり、異なるHTML要素 タイプを試すことができます。プリセットライブラリには、カード、ボタン、バッジ、 ヒーローセクションなど、一般的なUIパターンの出発点が用意されており、 ニーズに合わせてカスタマイズできます。

1. Tailwindクラス入力フィールドにTailwind CSSクラス名を入力します。クラスはリアルタイムでプレビュー要素に適用されます。
2. 入力中に表示されるオートコンプリート候補を使用するか、クイックリファレンスグリッドをブラウズしてクリックでクラスを追加します。
3. コンテンツフィールドを変更して、プレビュー要素内に表示されるテキストをカスタマイズします。
4. 異なる要素タイプ（div、button、spanなど）を選択して、異なるHTML要素でクラスがどのように見えるか確認します。
5. 背景をライト、ダーク、チェッカーボード間で切り替えて、コントラストと視認性を確認します。
6. ビューポートを切り替えて、モバイル、タブレット、デスクトップ、フル幅での要素の表示を確認します。
7. 計算済みCSSパネルを確認して、Tailwindクラスによって生成された実際のCSSプロパティを確認します。
8. HTMLをコピーをクリックするか、Ctrl+Shift+Cを押して、生成されたHTMLスニペットをコピーします。
9. プリセットから、カスタマイズ可能な既製コンポーネントの例を試してみてください。