mcpField
T
tailwindcss-layout

tailwindcss-layout

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

tailwindcss-layout について

レスポンシブな画面を構築する開発者向けに、Tailwind CSS v4.3 のレイアウトユーティリティを扱うスキルです。Flexbox、Grid、配置、表示、間隔、整列、コンテナクエリを取り上げます。

主な機能

  1. 01Flexbox の方向と整列ユーティリティ
  2. 02Grid のトラックと配置ユーティリティ
  3. 03配置と inset の制御
  4. 04表示モードユーティリティ
  5. 05コンテナクエリとブレークポイント
  6. 06間隔と複数軸の整列

活用シーン

  1. 01Flexbox によるレスポンシブなコンテンツ配置
  2. 02ページグリッドの構築と要素の配置
  3. 03オーバーレイの配置と重なり順の制御
  4. 04コンテナサイズに応じたレイアウト調整

インストール

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

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

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
flexbox.md
grid.md
position.md

詳細

Tailwind CSS v4.3 のレイアウトユーティリティ：Flexbox（`flex`、方向、`justify-*`、`items-*`、`gap`）、Grid（`grid-cols-*`、`grid-rows-*`、`place-*`）、Position（`absolute`／`relative`／`fixed`／`sticky`、`inset-*`、`z-*`）、Display（`block`／`inline`／`flex`／`grid`／`hidden`）、コンテナークエリー（`@container`、コンテナー基準のブレークポイント `@md`／`@lg`）。

多方向のスペーシング（gap、space-x／space-y）と複数軸の配置ユーティリティも扱います。

Tailwind CSS レイアウトユーティリティ（v4.3）

Flexbox、Grid、Position、コンテナークエリーを使ってレスポンシブレイアウトを構築するためのレイアウトユーティリティです。

主なトピック

  • Flexbox：flex、flex-direction、justify-content、align-items、gap
  • Grid：grid、grid-template-columns、grid-template-rows、place-items、place-content
  • Position：absolute、relative、fixed、sticky、inset、z-index
  • Display：block、inline、inline-block、flex、grid、hidden
  • コンテナークエリー：@container、@container-size（v4.3 以降。cqb／cqh 単位向けのサイズコンテナー）、@md、@lg、レスポンシブなコンテナーサイズ
  • スペーシング：gap、space-x、space-y、多方向のスペーシング
  • 配置：justify-start、items-center、place-content、複数軸の配置
  • Inset：inset、inset-x、inset-y、top、right、bottom、left、論理プロパティの inset-s／inset-e／inset-bs／inset-be（v4.2 以降。start-*／end-* は非推奨）

Display

<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="inline-block">Inline-block</div>
<div class="flex">Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>

参考資料

  • /flexbox.md - Flexbox ユーティリティ、Flex の方向、伸縮
  • /grid.md - Grid レイアウト、列、行、間隔、配置
  • /position.md - Position ユーティリティ、absolute／relative／fixed／sticky、重なり順

コメント

Markdown 対応