tailwindcss-layout について
レスポンシブな画面を作る開発者向けの、Tailwind CSS v4.3 レイアウトユーティリティのリファレンススキルです。Flexbox、Grid、配置、表示、間隔、整列、コンテナクエリを扱います。
主な機能
- 01Flexbox レイアウトユーティリティ
- 02Grid の行・列・配置
- 03位置指定と表示のユーティリティ
- 04コンテナクエリとブレークポイント
- 05間隔と多軸の整列
活用シーン
- 01レスポンシブな Flexbox レイアウトの構築
- 02グリッドベースのページ構成
- 03画面要素の配置と重ね合わせ
- 04コンテナ基準のブレークポイント適用
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/tailwindcss-layoutを入力して読み込まれたか確認します。
詳細
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 対応