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定位与显示工具
  4. 04容器查询与断点
  5. 05间距与多轴对齐

适用场景

  1. 01构建响应式 Flexbox 布局
  2. 02定义基于网格的页面结构
  3. 03定位并叠放界面元素
  4. 04应用相对容器的断点

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/tailwindcss-layout确认已加载。

详细介绍

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