tailwind-patterns
✓一般的な Web サイト コンポーネント (レスポンシブ レイアウト、カード、ナビゲーション、フォーム、ボタン、タイポグラフィー) 用のプロダクション対応の Tailwind CSS パターン。間隔スケール、ブレークポイント、モバイルファーストパターン、ダークモードのサポートが含まれます。 UI コンポーネントの構築、ランディング ページの作成、フォームのスタイル設定、ナビゲーションの実装、またはレスポンシブ レイアウトの修正を行うときに使用します。
SKILL.md
Status: Production Ready ✅ Last Updated: 2026-01-14 Tailwind Compatibility: v3.x and v4.x Source: Production projects, shadcn/ui patterns
| Tight spacing | gap-2 p-2 space-y-2 | 0.5rem (8px) | | Standard spacing | gap-4 p-4 space-y-4 | 1rem (16px) | | Comfortable | gap-6 p-6 space-y-6 | 1.5rem (24px) | | Loose | gap-8 p-8 space-y-8 | 2rem (32px) | | Section spacing | py-16 sm:py-24 | 4rem/6rem (64px/96px) |
Standard Pattern: Use increments of 4 (4, 6, 8, 12, 16, 24)
一般的な Web サイト コンポーネント (レスポンシブ レイアウト、カード、ナビゲーション、フォーム、ボタン、タイポグラフィー) 用のプロダクション対応の Tailwind CSS パターン。間隔スケール、ブレークポイント、モバイルファーストパターン、ダークモードのサポートが含まれます。 UI コンポーネントの構築、ランディング ページの作成、フォームのスタイル設定、ナビゲーションの実装、またはレスポンシブ レイアウトの修正を行うときに使用します。 ソース: jezweb/claude-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/jezweb/claude-skills --skill tailwind-patterns- カテゴリ
- </>開発ツール
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
tailwind-patterns とは？
一般的な Web サイト コンポーネント (レスポンシブ レイアウト、カード、ナビゲーション、フォーム、ボタン、タイポグラフィー) 用のプロダクション対応の Tailwind CSS パターン。間隔スケール、ブレークポイント、モバイルファーストパターン、ダークモードのサポートが含まれます。 UI コンポーネントの構築、ランディング ページの作成、フォームのスタイル設定、ナビゲーションの実装、またはレスポンシブ レイアウトの修正を行うときに使用します。 ソース: jezweb/claude-skills。
tailwind-patterns のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/jezweb/claude-skills --skill tailwind-patterns インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/jezweb/claude-skills
詳細
- カテゴリ
- </>開発ツール
- ソース
- skills.sh
- 初回登録
- 2026-02-01