tailwindcss-advanced-layouts - 使用 Tailwind CSS 构建高级布局
提供 Tailwind CSS 的 Grid、Flexbox、容器查询、定位、滚动、宽高比和响应式布局模式。
标签
更新于: 2026-09-28能力
典型输入
典型输出
该技能可以做什么
- 构建 CSS Grid 布局
- 创建响应式网格模式
- 应用 Flexbox 尺寸模式
- 定义容器查询
- 实现粘性定位
- 配置滚动行为
- 设置宽高比
- 管理布局层级
输入
- 布局需求
- 组件标记
- Tailwind CSS 项目
- 内容结构
输出
- Tailwind CSS 类模式
- CSS 工具类定义
- 响应式布局标记
- Grid 和 Flexbox 示例
要求
- Tailwind CSS
- 使用所示 @utility 语法时需要 Tailwind CSS v4
- 使用容器查询时需要容器查询插件
- 浏览器支持 CSS Grid 和 Flexbox