背景图案与网格系统在Tailwind中完全独立；背景需用bg-[...]写死渐变表达式（如两层linear-gradient叠加+bg-[size]），网格必须同时声明grid类和grid-cols-*等，缺一不可。
背景图案和网格系统在 Tailwind 中是两套独立机制，不能混用；背景图案靠 bg-[] 任意值语法实现，网格布局必须显式声明 grid 类并配合 grid-cols-* 等工具类——漏掉任一环节都会失效。
背景图案必须用 bg-[] 写死整个渐变表达式
Grid 背景、点阵、斜线等都不是预设类，Tailwind 不提供 bg-grid 或 bg-dots 这类语义化类名。所有图案都靠 CSS 原生渐变函数写进 bg-[...]，且必须一次性写全多层叠加和尺寸控制。
- 网格背景要两层
linear-gradient叠加，缺一层就只剩横线或竖线：bg-[linear-gradient(to_right,#000_1px,transparent_1px),linear-gradient(to_bottom,#000_1px,transparent_1px)] -
bg-[size:24px_24px]必须显式跟在后面，否则浏览器按auto渲染，格子会拉伸变形 - 点阵用
radial-gradient，注意circle_at_50%_50%和bg-[size:20px_20px]的单位匹配，否则点会偏移或缩放失真 - 斜线用
repeating-linear-gradient，角度（如45deg）和像素间隔（如#000_1px,transparent_1px）共同决定疏密，改一个参数就得重测
grid-cols-* 不等于网格布局，grid 类才是开关
只写 grid-cols-3 没用，它只是设置 grid-template-columns，但容器仍是 display: block。真正触发网格行为的是 grid 类（对应 display: grid）。
- 必须同时写
grid grid-cols-3，顺序无关，但缺一不可 - 用 DevTools 检查 computed 样式，确认
display是grid，而不是block或flex -
gap-4、col-gap-2等间距类只在grid或flex容器中生效，否则被忽略 - 响应式列数如
md:grid-cols-4依赖断点配置，若项目删了sm断点，sm:grid-cols-2就完全不生成 CSS
网格列数与背景图案尺寸容易互相干扰
当背景图案用 bg-[size:24px_24px]，而网格列宽恰好接近该数值时，视觉上会出现“格子对不齐”的错觉——其实不是 bug，是 CSS 渲染的像素对齐问题。
立即学习“前端免费学习笔记（深入）”；
- 背景图案尺寸建议用偶数（如
16px、24px），避免半像素导致模糊 - 如果网格项设置了
rounded-lg或border，边缘会切割背景图，需用bg-clip-padding控制裁剪区域 - 想让背景图案随网格项缩放，不要把
bg-[...]加在网格容器上，而是加在每个子项上，并配bg-no-repeat bg-center -
grid-cols-[200px_1fr]这类自定义轨道写法，和bg-[size]无直接冲突，但要注意 JIT 模式是否启用，否则方括号语法不生效
最常被忽略的是：背景图案的 bg-[size] 和网格的 gap 都影响视觉节奏，但二者底层机制完全不同——前者是 background-image 的平铺控制，后者是 grid layout 的轨道间隙。调其中一个，另一个不会自动适配。
