mcpField
T
tailwindcss-responsive

tailwindcss-responsive

github.com/fusengineデザイン・UI3445 回インストール2 週間前に更新
リポジトリ

tailwindcss-responsive について

画面サイズに応じたレイアウトを作る開発者向けの、Tailwind CSS v4 レスポンシブデザインのリファレンススキルです。標準・カスタムブレークポイント、コンテナクエリ、モバイルファーストの記述方法を説明します。

主な機能

  1. 01標準レスポンシブブレークポイント
  2. 02@theme によるカスタムブレークポイント
  3. 03コンテナクエリとバリアント
  4. 04モバイルファーストの記述パターン

活用シーン

  1. 01大きな画面向けのスタイルを段階的に追加
  2. 02プロジェクト固有のブレークポイント定義
  3. 03コンテナ寸法に応じたスタイル適用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/fusengine/agents --skill tailwindcss-responsive

インストール後、Claude Code で/tailwindcss-responsiveを入力して読み込まれたか確認します。

詳細

Tailwind CSS v4 のレスポンシブデザインユーティリティについて説明します。デフォルトのブレークポイントスケール（`sm`／`md`／`lg`／`xl`／`2xl`）、`@theme` を使用したカスタムブレークポイントの定義、コンテナクエリ（`@container`、コンテナを基準とする `@md`／`@lg` バリアント）、およびモバイルファーストの記述パターン（基本スタイルを先に記述し、その上に大きなブレークポイントの上書きを重ねる方法）を扱います。

レスポンシブデザイン

デフォルトのブレークポイント

バリアントサイズCSS
sm:40rem (640px)@media (width >= 40rem)
md:48rem (768px)@media (width >= 48rem)
lg:64rem (1024px)@media (width >= 64rem)
xl:80rem (1280px)@media (width >= 80rem)
2xl:96rem (1536px)@media (width >= 96rem)

カスタムブレークポイント

@theme {
  --breakpoint-3xl: 120rem;
}
/* Usage: 3xl:grid-cols-6 */

v4 のコンテナクエリ

<div class="@container">
  <div class="@md:grid-cols-2 @lg:grid-cols-3">
    
  </div>
</div>
サイズコンテナ（v4.3 以降）

@container はインラインサイズコンテナを作成します。@container-size はサイズコンテナを作成し、ブロック軸の単位（cqb、cqh）を解決できるようにします。@container-size/{name} を使用して名前を付けます。

<div class="@container-size">
  <div class="h-[50cqb]">
    
  </div>
</div>

モバイルファースト

<div class="text-sm md:text-base lg:text-lg">
  
</div>

コメント

Markdown 対応