关于 tailwindcss-responsive
面向使用 Tailwind CSS v4 构建响应式界面的开发者，介绍断点、容器查询与移动优先的样式编写方式。内容涵盖默认及自定义断点。
主要功能
- 01默认断点范围
- 02使用 @theme 定义自定义断点
- 03容器查询变体
- 04移动优先的样式模式
适用场景
- 01为响应式布局选择断点
- 02定义项目专用断点值
- 03根据容器调整组件样式
- 04在基础样式上叠加大屏覆盖规则
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/tailwindcss-responsive确认已加载。
详细介绍
介绍 Tailwind CSS v4 中的响应式设计工具：默认断点范围（`sm`/`md`/`lg`/`xl`/`2xl`）、通过 `@theme` 定义自定义断点、容器查询（`@container`、`@md`/`@lg` 容器相对变体），以及移动优先的编写模式（先编写基础样式，再叠加较大断点的覆盖样式）。
响应式设计
默认断点
| 变体 | 尺寸 | CSS |
|---|---|---|
sm: | 40rem (640px) | @media (width >= 40rem) |
md: | 48rem (768px) | @media (width >= 48rem) |
lg: | 64rem (1024px) | @media (width >= 64rem) |
xl: | 80rem (1280px) | @media (width >= 80rem) |
2xl: | 96rem (1536px) | @media (width >= 96rem) |
自定义断点
@theme {
--breakpoint-3xl: 120rem;
}
/* Usage: 3xl:grid-cols-6 */
v4 中的容器查询
<div class="@container">
<div class="@md:grid-cols-2 @lg:grid-cols-3">
</div>
</div>
尺寸容器（自 v4.3 起）
@container 会创建内联尺寸容器；@container-size 会创建尺寸容器，使块轴单位（cqb、cqh）能够正确解析。使用 @container-size/{name} 为其命名。
<div class="@container-size">
<div class="h-[50cqb]">
</div>
</div>
移动优先
<div class="text-sm md:text-base lg:text-lg">
</div>
评论
支持 Markdown