toolsmoah

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以上
    Tailwind Playground