Tailwind Playground
Tailwind CSSクラスをリアルタイムでテスト・プレビューします。
設定
要素のタイプとコンテンツを設定します
プリセット例
よく使われるスタイルの組み合わせを素早く適用します
Button
Card
Badge
Alert
Input
プレビュー
リアルタイムでスタイルが適用された結果を確認します
こんにちは、Tailwind!
生成されたHTML
現在の設定で生成されたHTMLコード
<div className="bg-blue-500 text-white p-4 rounded-lg shadow-md hover:bg-blue-600 transition-colors">こんにちは、Tailwind!</div>
💡 使い方のヒント
一般的なクラス:
- •
hover:- ホバー状態のスタイル - •
focus:- フォーカス状態のスタイル - •
active:- アクティブ状態のスタイル - •
transition-colors- 色のトランジション効果
レスポンシブクラス:
- •
sm:- 640px以上 - •
md:- 768px以上 - •
lg:- 1024px以上 - •
xl:- 1280px以上