Tailwind 默认启用 box-sizing: border-box，padding 加入后内容区变窄是正常履约行为，而非 bug；其设计逻辑是让 width 值代表总占位宽，padding 和 border 被包含其中，内容区自动收缩以守住该尺寸。
Tailwind 默认已启用 box-sizing: border-box，所以“内边距挤压内容”不是 Tailwind 的 bug，而是你误以为内容区该保持固定宽高——实际上，border-box 就是靠压缩内容区来守住总尺寸的，这是它正常工作的表现。
为什么 padding 一加内容就变窄了
因为 box-sizing: border-box 的设计逻辑就是：你写的 width: 300px 指的是整个盒子占位总宽，浏览器必须把 padding 和 border “塞进去”，只能让 content 区自动收缩。这不是挤压，是履约。
- 比如
class="w-72 p-4 border"（即 width: 18rem = 288px，padding: 1rem = 16px ×2，border: 2px）→ 内容区实际宽度 = 288 − 32 − 4 = 252px - 若你期望内容区始终是 288px，那该用
box-content，但会立刻引发布局溢出、flex 换行等连锁问题 - Tailwind 的
box-border类（默认启用）和 preflight 样式都基于此逻辑，强行“撑开”内容区反而破坏一致性
什么时候你会觉得“被挤压”其实是预期外的
常见于表单控件、卡片内文本、或与 legacy CSS 混用时——根源常是未覆盖某些元素的默认 content-box 行为。
-
input、textarea、select在部分浏览器（如旧版 Safari）中仍默认box-sizing: content-box，需显式重写：input, textarea { box-sizing: border-box; } - 第三方 UI 库（如某些 Chart.js 容器、Map 组件）可能强制设了
box-sizing: content-box，要用更具体选择器覆盖，例如：.chart-container > div { box-sizing: border-box; } - 用了
resize: both的textarea，设为border-box后拖拽变宽，内容区才真正扩展；设content-box反而会让视觉宽度“跳变”
如何验证是不是 box-sizing 导致的错觉
打开 Chrome DevTools，选中元素，在「Computed」面板查 box-sizing 值；再看「Metrics」面板里蓝色总宽度条——如果加 p-4 后蓝色宽度不变，说明 border-box 已生效，内容区变窄是正确结果。
- 别只盯着「Styles」面板里写的
width: 18rem，它显示的是你声明的值，不是 content 区真实宽 - 若 Metrics 中蓝色宽度随
p-4增大，说明box-sizing没生效，检查是否被更高优先级样式（如 inline style 或 !important）覆盖 - Tailwind 的响应式类如
md:box-content可能意外触发切换，搜索项目中是否误用了这类类名
真正容易被忽略的点是：box-sizing 改变的是盒模型语义，不是渲染效果本身；你看到的“挤压”，往往是 content 区在守约，而你还没调整对 layout 的直觉预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
