modern-tailwind について
インターフェースの開発・保守向けの Tailwind CSS 実践スキルです。ユーティリティの整理、状態バリアント、レスポンシブレイアウト、テーマ設定、再利用可能なコンポーネントを扱います。
主な機能
- 01用途別にユーティリティクラスを整理
- 02セマンティックな状態・アクセシビリティのバリアントを使用
- 03レスポンシブとコンテナクエリのユーティリティを適用
- 04テーマ拡張とカスタムレイヤーを案内
- 05重複クラスより再利用可能なコンポーネントを推奨
活用シーン
- 01Tailwind のユーティリティでレスポンシブページを作成
- 02追加の JavaScript なしで操作状態を表現
- 03一貫したテーマと再利用可能な UI を保守
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/modern-tailwindを入力して読み込まれたか確認します。
詳細
Tailwind CSS のベストプラクティス
基本原則
- ほとんどのスタイルには、カスタム CSS よりもユーティリティクラスを優先してください
- クラスリストは、レイアウト → 余白 → タイポグラフィ → 色 → エフェクトの順にグループ化して、読みやすくしてください
- まずセマンティックな HTML を使用してください。ユーティリティは構造を置き換えるのではなく、補完するものです
バリアントと状態
- 適切な場合は、
hover、focus-visible、disabled、dark、motion-safeの各バリアントを使用してください - DOM のセマンティクスに紐づく状態のスタイリングには、
data-*およびaria-*バリアントを優先してください - 余計な JS を追加せずに、親要素や兄弟要素の状態を扱うには
groupとpeerを使用してください
レスポンシブ対応とコンテナクエリ
- 基本スタイルから始め、次にレスポンシブバリアント（
sm、md、lg、...）を追加してください - レイアウトが親要素のサイズに依存する場合は、コンテナクエリユーティリティを使用してください
テーマ設定とカスタマイズ
- 場当たり的なカスタムクラスを作成するのではなく、
tailwind.configでテーマを拡張してください - 繰り返しを避けられない場合は、カスタムユーティリティやコンポーネントに
@layerを使用してください - 小規模で繰り返し使用するパターンを除き、
@applyは避けてください
保守性
- 長いクラス文字列を繰り返すのではなく、再利用可能な UI をコンポーネントとして切り出してください
- クラス名は決定的なものにし、可能であれば動的な文字列連結を避けてください
コメント
Markdown 対応