Tailwind 不支持在 theme.spacing 或 theme.extend 中添加百分比值作为 width/height 单位，因其 spacing 系统仅接受无单位数字或带单位字符串，百分比（如 '50%'）非法；自定义百分比宽度应使用 w-1/2 等内置分数类或插件/addUtilities 方式实现。
Tailwind 本身不提供“屏幕比例单位”这类概念，也没有 aspect-ratio 的百分比配置项——它只接受数值比（如 16/9）或小数（如 0.5625），且必须通过 aspect- 工具类作用于容器，不能在 tailwind.config.js 中扩展“百分比单位”作为尺寸系统的一部分。
为什么不能在 theme.spacing 或 theme.extend 中添加百分比值作为 width/height 单位
Tailwind 的 spacing 配置（即 theme.spacing 或 theme.extend.spacing）只用于生成固定长度的工具类，例如 mt-4、px-8，其底层值必须是带单位的字符串（如 '1rem'、'24px'）或无单位数字（自动转为 rem）。百分比（'50%'）不是合法 spacing 值，强行写入会导致构建失败或被忽略。
-
theme.spacing不支持%，写{ 'half': '50%' }不会生成w-half类 - 即使你用
extend.width手动加{ '50p': '50%' }，Tailwind v3.3+ 也**不会自动为它生成响应式变体**（如md:w-50p），因为宽度类的响应式逻辑只绑定在预设的width键上，且不支持百分比键名解析 - 真正需要“百分比宽度”的场景，直接用现成的
w-1/2、w-3/4等分数类即可，它们本质就是width: 50%、width: 75%
如何让自定义宽高比（aspect-ratio）支持动态计算的小数形式
如果你的目标是“用百分比逻辑表达宽高比”，比如把 9/16 = 56.25% 当作 padding-top 基准，那正确路径不是改配置，而是用 aspect-[x] 写小数，并确保环境支持：
- 必须使用 Tailwind v3.3+（v3.2 需手动开启
experimental.aspectRatio） - 类名要写成
aspect-[0.5625]，不是aspect-[56.25%]（后者非法） - 该容器必须有明确宽度（如
w-full），否则aspect-ratio无基准可算 - 避免在 React/Vue 中动态拼接：❌
className={`aspect-[${ratio}]`}→ ✅ratio === '9/16' ? 'aspect-[0.5625]' : 'aspect-square' - Safari 15.4+ 才原生支持
aspect-ratio: 0.5625；若需兼容更低版本，退回pt-[56.25%]+relative/absolute布局
想批量生成带百分比的自定义类？用插件或 CSS 变量更可靠
如果项目真有大量非标准百分比需求（如 w-37p、h-83p），不要硬塞进 tailwind.config.js。可行替代方案：
立即学习“前端免费学习笔记（深入）”；
- 用
addUtilities插件手写 CSS：在plugins: []里注册，生成.w-37p { width: 37% }等规则，它绕过 spacing 系统，直接注入 CSS - 用 CSS 变量 +
theme.extend控制颜色/间距以外的属性：例如extend: { width: { '37p': '37%' } }—— 注意这仅在 v3.4+ 支持，且仍不产生响应式类 - 最轻量做法：在全局 CSS 里直接写
.w-37p { width: 37% }，配合 PurgeCSS 的saferMatching或whitelist保活
真正容易被忽略的一点：Tailwind 的“单位系统”是分层的——spacing 管缩放，width/height 管尺寸，aspect-ratio 管比例，三者互不重叠。试图用一个配置项打通所有百分比场景，只会卡在构建报错或类名不生成上。
