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. 01使用 Flexbox 排列响应式内容
  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-*`）、定位（`absolute`/`relative`/`fixed`/`sticky`、`inset-*`、`z-*`）、显示（`block`/`inline`/`flex`/`grid`/`hidden`）和容器查询（`@container`、`@md`/`@lg` 容器相对断点）。

还涵盖多方向间距（gap、space-x/space-y）和多轴对齐工具。

Tailwind CSS 布局工具（v4.3）

用于使用 Flexbox、Grid、定位和容器查询构建响应式布局的工具。

核心主题

  • Flexbox：flex、flex-direction、justify-content、align-items、gap
  • Grid：grid、grid-template-columns、grid-template-rows、place-items、place-content
  • 定位：absolute、relative、fixed、sticky、inset、z-index
  • 显示：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-* 已弃用）

显示

<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 工具、弹性方向、弹性增长/收缩
  • /grid.md - Grid 布局、列、行、间距、放置
  • /position.md - 定位工具、absolute/relative/fixed/sticky、堆叠

评论

支持 Markdown