tailwind-css
Tailwind CSSでUIコンポーネントをスタイリングする
レスポンシブでアクセシブルなユーザーインターフェースを構築するには、ユーティリティクラスとデザインパターンの深い知識が必要です。このスキルは、Tailwind CSSの規則を使用したモバイルファーストレイアウト、ダークモード対応、およびコンポーネントスタイリングの専門家によるガイダンスを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「tailwind-css」を使用しています。 KPIカードコンポーネントをモバイルファーストのレスポンシブデザインとダークモード対応でスタイリングする
期待される結果:
- モバイルビューпорт（375px）のベーススタイルを作成
- 更大画面のためのsm:、md:、lg:ブレークポイントを追加
- ダークモード用のdark:カラーバリアントを含める
- アクセシビリティ用のfocus-visible状態を追加
- 4.5:1のカラーコントラスト比率を確保
「tailwind-css」を使用しています。 モバイルからデスクトップに適応するダッシュボードグリッドを作成する
期待される結果:
- モバイルのベーススタイルにgrid-cols-1で開始
- タブレットブレークポイントにsm:grid-cols-2を適用
- デスクトップレイアウトにmd:grid-cols-3を使用
- 大画面用にlg:grid-cols-4を追加
- アイテム間で一貫したgap-4のスペーシングを含める
「tailwind-css」を使用しています。 セマンティック名でカスタムカラーテーマを設定する
期待される結果:
- primary、secondary、accentカラーパレットを定義
- 各セマンティックカラーに50から900までのカラーシェードを作成
- デフォルトテーマを上書きするのではなく拡張する
- 動的テーマ対応のCSS変数をサポート
- マニュアルトグル用にdarkMode: 'class'を有効化
セキュリティ監査
安全Pure documentation skill with no executable code, no file access, no network operations, and no sensitive capabilities. Contains only Tailwind CSS guidance and best practices. All 102 static findings are false positives caused by the analyzer misinterpreting JSON metadata as cryptographic algorithms and Markdown code formatting (backticks) as shell command execution.
リスク要因
🌐 ネットワークアクセス (5)
📁 ファイルシステムへのアクセス (1)
⚙️ 外部コマンド (56)
品質スコア
作れるもの
コンポーネントスタイリング
ボタン、フォーム、カード、レイアウトのためにユーティリティクラスでReactコンポーネントをスタイリングします
レスポンシブレイアウト
ブレークポイント全体に適応するモバイルファーストのレスポンシブダッシュボードとグリッドを構築します
ダークモード対応
ダークモードバリアントとカラースキーム設定を使用したテーマ切り替えを実装します
これらのプロンプトを試す
プライマリとセカンダリのバリエーションを使用して、ボタンコンポーネントをTailwind CSSでスタイリングしてください。ホバー状態、フォーカスリングを含め、小サイズと中サイズに対応させてください。
モバイルでは1列、タブレットでは2列、デスクトップでは3列、大画面では4列を表示するレスポンシブグリッドレイアウトを、Tailwind CSSのブレークポイントを使用して作成してください。
既存のカードコンポーネントにダークモード対応を追加してください。ライトテーマとダークテーマの両方で適切なカラーコントラスト比率を含めてください。
セマンティックな色名（primary、secondary、accent）とカスタムスペアリングスケールを持つカスタムTailwindテーマをtailwind.config.tsで構成してください。
ベストプラクティス
- モバイルスタイルから開始し、ブレークポイントで更大画面用に強化する
- ハードコードされた値ではなくセマンティックな色名（primary、secondary）を使用する
- インタラクティブな要素には常にfocus-visibleまたはfocus:ringを含める
- 標準ブレークポイント（375px、768px、1024px、1440px）でレイアウトをテストする
回避
- tailwind.config.tsでテーマ全体を上書きするのではなく拡張する
- ユーティリティクラスで十分な場合にカスタムCSSを使用する
- インタラクティブな要素のフォーカス状態をスキップする
- テーマ変数ではなくハードコードされた色値を使用する