做响应式用这Skill看内容宽度

使用 Tailwind CSS v4 实现移动优先响应式设计模式。

tailwindcss-mobile-first 是用 Tailwind 组织响应式界面的 Skill。它以无前缀样式为基础,再按内容空间用断点增强,而不是用设备名字固定布局。

无前缀并非只在手机生效,断点以上的规则也会继续叠加。可复用卡片放进窄栏时,容器查询看它自己的宽度,更贴近组件所在位置;主文只讲原则,完整配方未展开。

触屏不能只靠悬停,按钮还要看点击范围、间距与键盘焦点。固定底栏需留安全区及正文空间,图片预留尺寸减少跳动。适合在真实内容与多种宽度下核布局;本文未改页面或测设备,四十四像素是这里的建议,不能自动等同全部可访问性标准。

分类:编程开发

来源仓库:josiahsiegel/claude-plugin-marketplace

适合用来做什么

  • 使用Tailwind CSS设计一个移动优先的响应式导航栏。
  • 为我们的网页应用添加一个响应式网格布局。

安装 tailwindcss-mobile-first

npx skills add https://www.iskills.cc/skills/josiahsiegel/claude-plugin-marketplace/tailwindcss-mobile-first/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 tailwindcss-mobile-first 的用途与原始说明

浏览全部 Skill 指南