Tailwind原生支持bg-[...]写CSS渐变网格，需用两层linear-gradient交叉叠加并显式声明bg-[size]，如bg-[linear-gradient(to_right,#000_1px,transparent_1px),linear-gradient(to_bottom,#000_1px,transparent_1px)] bg-[size:20px_20px]。
用 bg-[...] 直接写 CSS 渐变网格，不配插件
Tailwind 原生支持任意值语法，bg-[...] 就是写复杂背景图案最直接的方式。所谓“网格”，本质是两层 linear-gradient 交叉叠加，不需要额外插件或配置文件。
常见错误现象：写了 bg-[linear-gradient(...)] 却没效果——大概率漏了 bg-[size:24px_24px]，浏览器默认按 auto 渲染，格子无限大，肉眼不可见。
- 网格必须显式声明
bg-[size]，比如bg-[size:20px_20px]控制格距 - 两层渐变不能拆成两个 class，必须合并在一个
bg-[...]里，否则第二层会被覆盖 - 方向要对：一层
to_right（竖线），一层to_bottom（横线） - 像素单位写法要一致：用
#000_1px而不是#000_1，否则浏览器解析失败
示例（20px 网格）：bg-[linear-gradient(to_right,#000_1px,transparent_1px),linear-gradient(to_bottom,#000_1px,transparent_1px)] bg-[size:20px_20px]
为什么 tailwind.config.js 里加了 backgroundImage 还是不生效
加了配置 ≠ 自动可用，三个硬性条件缺一不可：
- 修改后必须重启开发服务器（
vite dev、next dev），热更新不会重新扫描tailwind.config.js中的theme.extend.backgroundImage - 键名只能含小写字母、数字、短横线，
'grid-bg'合法，'GridBg'或'grid bg'会导致生成的 class 名缺失或错乱 -
bg-grid-bg只设图片，不搭配bg-cover、bg-center、bg-repeat等行为类，浏览器按默认repeat+auto渲染，结果通常是糊成一片或只显示左上角一小块
真正生效的组合示例：bg-grid-bg bg-repeat bg-[size:16px_16px]
点阵、斜线、棋盘这些图案怎么写进 Tailwind
它们都依赖单个 bg-[...] 值，但写法差异明显，容易混淆：
- 点阵用
radial-gradient：bg-[radial-gradient(circle_at_50%_50%,#000_1px,transparent_1px)] bg-[size:18px_18px]，注意circle_at位置和bg-[size]必须匹配，否则点偏移或拉伸 - 斜线用
repeating-linear-gradient：bg-[repeating-linear-gradient(45deg,#000_0px,#000_1px,transparent_1px,transparent_2px)] bg-[size:14px_14px]，角度和像素尺寸共同决定疏密 - 棋盘最难，需四层渐变+错位定位，原生写法冗长，建议封装为自定义
@layer utilities或直接内联 CSS，避免反复手写
所有这些都绕不开 bg-[size] —— 它不是可选项，而是控制密度的核心参数。
用 SVG Data URL 写内联网格时 URL 编码必须手动做
想把 SVG 当作背景嵌入，又不想发请求加载外部文件？可以，但必须手动编码，bg-[url("data:image/svg+xml,...")] 里所有特殊字符都要转义：
→%3C，>→%3E，#→%23，空格 →%20- 双引号包裹整个 data URL，内部用单引号，否则 HTML 解析会中断
- DevTools 的 Network 标签页若出现 404，90% 是 URL 编码错了，不是路径问题
例如一个简单网格 SVG：bg-[url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 0L0 0 0 20' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E")] bg-[size:20px_20px]
最常被忽略的一点：所有 bg-[...] 图案都依赖 bg-[size] 显式控制密度；没有它，再复杂的渐变也看不出网格效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
