用 Tailwind CSS…

在 Tailwind CSS 中构建复杂二维网格、圣杯布局、响应式卡片网格、容器查询、粘性/固定定位、滚动吸附、多列排版与打印样式时使用。

适用场景

解决思路

1. 圣杯布局：用 `grid min-h-screen grid-rows-[auto_1fr_auto]` 做整体行结构，中间用 `grid grid-cols-[250px_1fr_300px]` 分三栏。
2. 响应式圣杯：中间行用 `grid-cols-1 md:grid-cols-[250px_1fr] lg:grid-cols-[250px_1fr_300px]`，配合 `order-*` 调整移动端顺序，右栏用 `hidden lg:block` 隐藏。
3. grid-template-areas：用 `@utility grid-areas-dashboard { grid-template-areas: ... }` 定义命名区域，再为每个区域定义 `@utility area-header { grid-area: header; }` 等，HTML 中用 `grid-areas-dashboard` 加 `grid-cols-*`/`grid-rows-*` 使用。
4. 自动填充网格：`grid-cols-[repeat(auto-fill,minmax(250px,1fr))]` 会保留空轨道；`auto-fit` 会折叠空轨道让卡片拉伸填满。
5. 容器小于 minmax 最小值时用 `grid-cols-[repeat(auto-fill,minmax(min(100%,300px),1fr))]` 兜底。
6. Subgrid：定义 `@utility subgrid-cols { grid-template-columns: subgrid; }` 和 `subgrid-rows`，子元素用 `col-span-2 grid subgrid-cols gap-4` 与父网格列对齐。
7. Flex 空间分配：`justify-between`（首尾贴边）、`justify-around`（含边缘等距）、`justify-evenly`（项间距是边缘两倍）。
8. Flex 弹性尺寸：`flex-1` 等分；`flex-[2]` 占双倍；固定+弹性用 `w-64 shrink-0` 配 `flex-1 min-w-0`；防溢出用 `min-w-0 truncate`。
9. Flex 瀑布流：`flex flex-col flex-wrap h-[800px] gap-4`，子项用 `w-[calc(33.333%-1rem)]` 加不同高度，内容纵向流动后换列。
10. 容器查询：引入 `@plugin "@tailwindcss/container-queries"`，父元素加 `@container`，子元素用 `@md:flex-row @lg:grid @lg:grid-cols-3` 响应容器宽度。
11. 命名容器：`@container/sidebar` 配 `@[200px]/sidebar:flex-col`，可同时存在多个独立容器。
12. 容器查询单位：`text-[5cqw]` 随容器宽度缩放，`text-[3cqi]` 随容器 inline 尺寸缩放。
13. 粘性定位：头部 `sticky top-0 z-50 bg-white/80 backdrop-blur-sm`；侧栏 `sticky top-20 h-[calc(100vh-5rem)] overflow-auto`；表格表头 `sticky top-0`，左上角单元格再加 `sticky left-0 z-10`。
14. 固定元素：移动端底部导航 `fixed bottom-0 inset-x-0 z-50 md:hidden`；悬浮按钮 `fixed bottom-6 right-6 z-40 rounded-full`。
15. Z-index 管理：在 `@theme` 中定义 `--z-dropdown` 到 `--z-toast` 的层级变量，再用 `@utility z-dropdown { z-index: var(--z-dropdown); }` 等暴露为工具类。
16. 自定义滚动条：`@utility scrollbar-thin { scrollbar-width: thin; }`、`scrollbar-none` 隐藏（含 `::-webkit-scrollbar { display: none; }`），`scrollbar-custom` 用 `scrollbar-color` 与 `::-webkit-scrollbar` 系列伪元素设置轨道/滑块/悬停色。
17. 滚动吸附：横向轮播用 `flex snap-x snap-mandatory overflow-x-auto gap-4` 配子项 `snap-start shrink-0 w-80`；整页分区用 `h-screen snap-y snap-mandatory overflow-y-auto` 配 `snap-start`；带内边距用 `scroll-pl-6`。
18. 锚点偏移：给目标区块加 `scroll-mt-20` 以避开固定头部。
19. 宽高比：`aspect-video`、`aspect-square`、`aspect-[4/3]`、`aspect-[21/9]`，内部媒体用 `h-full w-full object-cover`。
20. 对象定位：`object-top` 聚焦顶部，任意位置用 `object-[25%_75%]`。
21. 逻辑属性：用 `ps-4 pe-6 ms-auto`（行内方向）和 `pbs-4 pbe-6 mbs-auto`（块方向）自动适配 LTR/RTL。
22. 分隔线：纵向列表用 `divide-y divide-gray-200`，横向用 `flex divide-x divide-gray-200`。
23. 负外边距出血：在 `px-6` 容器内用 `-mx-6 w-[calc(100%+3rem)]` 让图片满宽；引用块用 `-mx-8 md:-mx-16 px-8 md:px-16` 突破正文宽度。
24. 多列排版：`columns-1 sm:columns-2 lg:columns-3 gap-8` 或固定宽 `columns-[300px] gap-6`，卡片用 `break-inside-avoid mb-4` 防止跨列断裂。
25. 容器查询与媒体查询混用：同一元素上同时写 `@md:flex @md:gap-4`（组件级）和 `lg:grid lg:grid-cols-2`（页面级）。
26. 断点显隐：移动端按钮 `md:hidden`，桌面导航 `hidden md:flex gap-4`。
27. 流体尺寸：用 `py-[clamp(2rem,5vw,6rem)] px-[clamp(1rem,3vw,4rem)]` 做响应式内边距，`max-w-[clamp(300px,90vw,1200px)]` 做响应式容器。
28. 打印样式：导航加 `print:hidden`，仅打印内容用 `hidden print:block`，正文用 `print:text-black print:bg-white`，链接用 `print:text-black print:underline`，用 `print:break-inside-avoid` 防分页、`print:break-before-page` 强制分页。
29. 布局选型：二维布局优先 Grid（`grid grid-cols-3 gap-4`），一维布局优先 Flexbox（`flex items-center gap-2`）。
30. 防溢出：Flex 子项加 `min-w-0` 配 `truncate`；Grid 容器加 `min-w-0`，内部用 `overflow-hidden` 防网格撑破。
31. 语义化尺寸：阅读内容用 `max-w-prose mx-auto`，页面区块用 `container mx-auto px-4`。
32. 在所有断点系统性测试响应式布局，确保每个断点都正常。

适用边界 · 注意事项

• 项目未使用 Tailwind CSS v4 时，`@utility`、`@theme`、`@plugin` 等语法不可用。
• 容器查询需要引入 `@tailwindcss/container-queries` 插件，未安装时 `@container` 与 `@md:` 等前缀无效。
• Subgrid 依赖浏览器对 `grid-template-columns: subgrid` 的支持，老旧浏览器不兼容。