Home page: Gradients card gets clipped
评估
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 新手友好度
- 78/100
- Issue 类型
- 缺陷
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- react, tailwindcss, typescript
调研方向
从 src/components/home/why-tailwind-css-section.tsx 中带有 -mt-27 -mr-124 -mb-8 类的 div 开始，然后检查其尺寸和边距在不同视口宽度下如何与 BentoBody 相互作用。调整布局，使 Gradients 卡片的文案和条形图在任何宽度下都保持可见。验证在报告的 1432px 宽度以及低于 xl 时，裁切问题都已消失。
由索引模型根据 Issue 内容生成。
描述
The Gradients card in the "Why Tailwind CSS" grid is bigger than the BentoBody that holds it, so its content is cut at the right and the bottom.
src/components/home/why-tailwind-css-section.tsx, the div with-mt-27 -mr-124 -mb-8 ... xl:-mr-26- at 1432px: right edge 72px past the clip (heading, paragraph and the 6.4x / 4.2x / 2.7x values cut), top 76px above it (12px of "Power Meets Precision" gone), card 616px tall in a 448px body (the "Multi-platform build time" bar gone)
- below
xlthe right margin goes back to-mr-124(496px) while the card's own right padding is 64px, so more is cut on smaller screens
scrollWidth stays clean because the parent has overflow-hidden.
Expected: copy and bars stay visible at any width.
Measured at 1432×900 in DevTools responsive mode.
Screenshot below.
- 主要语言
- MDX
- 星标
- 150
- 派生
- 78
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
tailwindlabs/tailwindcss.com 的其他 Issue
-
Theme variables page doesn't explain how to override values for a dark theme可能已有人在做 @oyobbeb 于 5 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 72/100
tailwindlabs/tailwindcss.com#2526 ·
-
No central documentation of options @import options可能已有人在做 @MHJahanbakhsh 于 76 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 85/100
tailwindlabs/tailwindcss.com#2514 ·
-
难度 2/5 1-3 小时 新手友好度 64/100
tailwindlabs/tailwindcss.com#2497 · 3 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 68/100
tailwindlabs/tailwindcss.com#2493 ·
-
Clarity on using colors in custom utilities可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭
难度 2/5 1-3 小时 新手友好度 68/100
tailwindlabs/tailwindcss.com#2473 ·
查看 tailwindlabs/tailwindcss.com 的全部 Issue
相似的 Issue
-
enhancement tech debt
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
auto:producer auto:uiux
难度 2/5 1-3 小时 新手友好度 78/100
fritzprix/libr-agent#2447 ·
维护者通常 1 天内回复
-
enhancement
难度 1/5 1 小时以内 新手友好度 88/100
维护者通常 1 天内回复
-
accessibility beginner bug frontend
难度 2/5 1-3 小时 新手友好度 82/100
BistaDinesh03/critique#281 ·
维护者通常 1 天内回复
-
enhancement
难度 1/5 1 小时以内 新手友好度 88/100
mprov-ng/mprov_control_center#450 ·
维护者通常 1 天内回复