Anthropic Claudeソフトウェア開発⭐ リポ 0品質スコア 50/100

tailwind-css-patterns

Name: tailwind-css-patterns
Author: giuseppe-trisciuoglio

Tailwind CSSのユーティリティファーストなスタイリングパターンを包括的に提供し、レスポンシブデザイン、レイアウト、Flexbox、Grid、スペーシング、タイポグラフィ、カラー、モダンCSSのベストプラクティスをカバーします。React/Vue/Svelteコンポーネントのスタイリング、レスポンシブレイアウトの構築、デザインシステムの実装、CSSワークフローの最適化に活用できます。

description の原文を見る

Provides comprehensive Tailwind CSS utility-first styling patterns including responsive design, layout utilities, flexbox, grid, spacing, typography, colors, and modern CSS best practices. Use when styling React/Vue/Svelte components, building responsive layouts, implementing design systems, or optimizing CSS workflow.

SKILL.md 本文

Tailwind CSS 開発パターン

Tailwind CSS ユーティリティファーストフレームワークで最新のレスポンシブなユーザーインターフェースを構築するための専門家ガイド。v4.1+ の機能（CSS ファースト設定、カスタムユーティリティ、強化された開発者体験）に対応しています。

概要

Tailwind CSS v4.1+ を使用したレスポンシブでアクセシブルな UI のための実践的なパターンを提供します。ユーティリティ合成、ダークモード、コンポーネントパターン、パフォーマンス最適化に対応しています。

使用場面

React/Vue/Svelte コンポーネントのスタイリング
レスポンシブレイアウトとグリッドの構築
デザインシステムの実装
ダークモードのサポート追加
CSS ワークフローの最適化

クイックリファレンス

レスポンシブブレークポイント

プレフィックス	最小幅	説明
`sm:`	640px	スモールスクリーン
`md:`	768px	タブレット
`lg:`	1024px	デスクトップ
`xl:`	1280px	ラージスクリーン
`2xl:`	1536px	エクストララージ

一般的なパターン

<!-- Center content -->
<div class="flex items-center justify-center min-h-screen">
  Content
</div>

<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- Items -->
</div>

<!-- Card component -->
<div class="bg-white rounded-lg shadow-lg p-6">
  <h3 class="text-xl font-bold">Title</h3>
  <p class="text-gray-600">Description</p>
</div>

手順

モバイルファースト: モバイル向けの基本スタイルを記述し、より大きな画面向けにはレスポンシブプレフィックス（sm:、md:、lg:）を追加
デザイントークンを使用: Tailwind のスペーシング、色、タイポグラフィスケールを活用
ユーティリティを合成: 複雑なスタイルには複数のユーティリティを組み合わせる
コンポーネントを抽出: 繰り返されるパターンのための再利用可能なコンポーネントクラスを作成
テーマを設定: tailwind.config.js で、または @theme を使用してデザイントークンをカスタマイズ
変更を確認: DevTools のレスポンシブモードを使用して各ブレークポイントでテストします。コミット前に視覚的な回帰とアクセシビリティの問題をチェックしてください。

例

レスポンシブカードコンポーネント

function ProductCard({ product }: { product: Product }) {
  return (
    <div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
      <img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
      <div className="p-6">
        <h3 className="text-lg font-semibold">{product.name}</h3>
        <button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
          Add to Cart
        </button>
      </div>
    </div>
  );
}

ダークモード切り替え

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h1 class="dark:text-white">Title</h1>
</div>

フォーム入力

<input
  class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="you@example.com"
/>

ベストプラクティス

一貫性のあるスペーシング: Tailwind のスペーシングスケール（4, 8, 12, 16 など）を使用
カラーパレット: 一貫性を保つために Tailwind のカラーシステムを遵守
コンポーネント抽出: 繰り返されるパターンを再利用可能なコンポーネントに抽出
ユーティリティ合成: 保守性のために @apply よりユーティリティクラスを優先
セマンティック HTML: Tailwind クラス付きで適切な HTML 要素を使用
パフォーマンス: 最適なパージングのためにコンテンツパスにすべてのテンプレートファイルを含める
アクセシビリティ: フォーカススタイル、ARIA ラベル、ユーザープリファレンス（reduced-motion）の尊重を含める

トラブルシューティング

クラスが適用されない

コンテンツパスを確認: すべてのテンプレートファイルが設定の content: [] に含まれていることを確認
ビルドを確認: npm run build を実行してパージされた CSS を再生成
デベロップモード: --watch フラグ付きで npx tailwindcss -o を使用してライブ更新

レスポンシブスタイルが機能しない

順序が重要: レスポンシブプレフィックスは非レスポンシブの前に来る必要があります（例：flex md:flex ではなく md:flex）
ブレークポイント値を確認: ブレークポイントがデザイン要件と一致していることを確認
DevTools: ブラウザの DevTools レスポンシブモードを使用して各ブレークポイントでテスト

ダークモードの問題

設定を確認: darkMode: 'class' または 'media' が正しく設定されていることを確認
トグル実装: クラス戦略の場合、document.documentElement.classList.toggle('dark') を使用
初期フラッシュ: ボディレンダリング前に dark クラスを <html> に追加

制約と警告

クラスの増殖: 長いクラス文字列は可読性を低下させるため、コンポーネントに抽出
コンテンツパス: パスの設定ミスは本番環境でクラスがパージされるのを招く
任意の値: 控えめに使用し、一貫性のためにデザイントークンを優先
特異性の問題: 複雑なセレクタで @apply を使用しない
ダークモード: 正しい設定（class または media 戦略）が必要
ブラウザサポート: 互換性については Tailwind ドキュメントを確認

リファレンス

references/layout-patterns.md — Flexbox、グリッド、スペーシング、タイポグラフィ、色
references/component-patterns.md — カード、ナビゲーション、フォーム、モーダル、React パターン
references/responsive-design.md — レスポンシブパターン、ダークモード、コンテナクエリ
references/animations.md — トランジション、トランスフォーム、ビルトインアニメーション、モーションプリファレンス
references/performance.md — バンドル最適化、CSS 最適化、本番ビルド
references/accessibility.md — フォーカス管理、スクリーンリーダー、色のコントラスト、ARIA
references/configuration.md — CSS ファースト設定、JavaScript 設定、プラグイン、プリセット
references/reference.md — 追加参考資料

外部リソース

ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ

詳細情報

作者: giuseppe-trisciuoglio
リポジトリ: giuseppe-trisciuoglio/developer-kit
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/giuseppe-trisciuoglio/developer-kit / ライセンス: MIT