tailwind 默认不包含 `w-108` 这类预设类名，需使用任意值语法 `w-[108px]` 才能精确控制图片尺寸，否则自定义数值类将被忽略。
在使用 Astro + Tailwind CSS 开发时，你可能会遇到图片无法按预期缩放的问题——例如写入 却毫无效果。这是因为 Tailwind 的宽度工具类（如 w-10, w-64）仅支持预设的数值尺度，而 w-108 并不在默认配置中（Tailwind v3.4+ 默认最大 w-96 = 24rem = 384px），因此该类名不会被编译生成对应 CSS 规则。
✅ 正确做法是使用 任意值（Arbitrary Values）语法：
@@##@@
? 小贴士：方括号 [] 内可写任意合法 CSS 长度值（支持 px, rem, em, %, vh, vw 等），Tailwind JIT 编译器会动态生成对应样式，例如 w-[108px] → { width: 108px; }。
⚠️ 注意事项：
- 确保你使用的是 Tailwind v3.0+（推荐 v3.3+），旧版本不支持任意值语法；
- 若项目启用了 content 路径扫描（Astro 默认开启），确保 .astro 文件被正确纳入 tailwind.config.js 的 content 数组，否则自定义类可能未被检测到；
- 图片默认具有 display: inline 行内特性，若需 width/height 生效，建议补充 block 或 inline-block（不过现代浏览器中多数情况无需额外设置）；
- 对于响应式需求，可组合使用：w-[108px] md:w-[200px] lg:w-full。
? 补充说明：为什么另一张图 可以生效？
因为 w-20 是 Tailwind 内置的预设类（对应 5rem / 80px），它已存在于默认配置中，会被自动编译。
总结：当需要非标准尺寸时，放弃猜测类名，直接用 w-[xxx] / h-[xxx] —— 简洁、可靠、符合 Tailwind 最佳实践。
立即学习“前端免费学习笔记（深入）”；
