Tailwindの設定やレスポンシブデザインに苦労するのはもう終わりです。このスキルは、CSSファーストのパターン、コンテナクエリの活用法、そしてTailwind CSS v4でスケーラブルなUIを構築するためのモダンなデザイントークンアーキテクチャを提供します。
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「tailwind-patterns」を使用しています。 コンテナクエリを使用したダークモードカードコンポーネントを作成
期待される結果:
- .card { @container; background: white; padding: var(--spacing-lg); }
- .dark .card { background: zinc-900; }
- @sm { .card-content { grid-template-columns: 1fr 1fr; } }
「tailwind-patterns」を使用しています。 OKLCHカラーでデザイントークンを設定
期待される結果:
- @theme {
- --color-primary: oklch(0.7 0.15 250);
- --color-surface: oklch(0.98 0 0);
- --spacing-md: 1rem;
- }
セキュリティ監査
安全Static analysis detected 77 potential issues (backtick execution patterns, weak cryptography, system reconnaissance) but ALL are FALSE POSITIVES. The flagged patterns are markdown code block delimiters (```), inline code formatting, and CSS framework documentation comparing v3 vs v4. No executable code exists - this is documentation-only content for Tailwind CSS v4 patterns.
品質スコア
作れるもの
Tailwind v3からv4への移行
JavaScript設定をCSSファーストの@themeディレクティブに置き換える必要がある、Tailwind v3からv4へのアップグレードを行う開発者向け
レスポンシブコンポーネントライブラリの構築
ビューポートのブレークポイントではなく、コンテナのサイズに適応する再利用可能なコンポーネントを作成するUIエンジニア向け
デザイントークンシステムの実装
OKLCHとCSS変数を使用して、意味論的なカラー、スペーシング、タイポグラフィスケールを確立するチーム向け
これらのプロンプトを試す
[プロジェクトタイプ]用のプライマリブランドカラー、スペーシングスケール、フォントスタックを含むTailwind v4の@theme設定を作成
狭いコンテナから広いコンテナまで適応するコンテナクエリを使用したレスポンシブな[コンポーネントタイプ]をデザイン
適切なカラートークンを使用して、[クラス/メディア/セレクタ]戦略で[ページタイプ]のダークモードを実装
レスポンシブブレークポイントと非対称Bentoスタイルセクションを使用して、[フレックスボックス/グリッド]で[レイアウトタイプ]を作成
ベストプラクティス
- パ��ォーマンスの向上とネイティブCSS変数サポートのため、Tailwind v4ではtailwind.config.jsの代わりにCSSファーストの@themeディレクティブを使用
- 再利用可能でコンテキストに依存しないコンポーネントの場合、ビューポートブレークポイントよりもコンポーネントレベルのレスポンシブデザインにコンテナクエリ（@container）を優先
- デザイントークンを3つの階層で整理：プリミティブカラー（生の値）��セマンティックトークン（primary、surface）、コンポーネントトークン（button-bg）
- モバイルファーストアプローチを使用：プレフィックスなしのベーススタイルを記述し、その後に大きな画面用のsm:、md:、lg:オーバーライドを追加
- クラスの組み合わせが3回以上繰り返される場合、または複雑な状態バリアントが必要な場合はコンポーネントを抽出
回避
- 任意の値をあち��ちで使用するのは避けましょう - w-[327px]のようなハードコードされた数値の代わりに、一貫性のためにデザインシステムのスケール値を使用
- スタイルを上書きするために!importantを使用しないでください - 適切なコンポーネント構造とCSSレイヤリングを通じて特異性の問題を修正
- インラインスタイル属性を避けてください - デザインシステムの一貫性を維持するためにTailwindのユーティリティクラスを使用
- v3のJavaScript設定をv4のCSSファーストパターンと混ぜないでください - @themeディレクティブとCSSベースの設定に完全に移行
- @applyディレクティブを多用するのは避けましょう - ダイナミックな動作にはReact/Vueコンポーネントを、静的なパターンには純粋なCSSコンポーネントを優先