Tailwind CSS类pt-12在div上失效，替换为p-12却正常

针对你遇到的pt-12不生效但p-12正常的情况，可从以下几个方向排查：

• 检查高优先级CSS规则的覆盖
  打开浏览器开发者工具（F12）选中目标<div>，查看Styles面板里的padding-top属性。如果pt-12对应的padding-top: 3rem被划掉，说明存在更高优先级的规则（如ID选择器、带!important的样式、更具体的类选择器）将其覆盖。可直接在工具中修改样式测试，找到冲突规则后调整优先级或修改对应代码。

• 确认元素的显示类型与盒模型
  尽管div默认是块级元素，但如果代码中通过其他类或全局样式将其改为inline、inline-table这类非块级类型，padding-top可能无法正常生效。同时检查box-sizing属性，若为content-box且元素高度被固定设置、内容撑满容器，可能导致内边距被挤出视野（不过这种情况p-12也会受影响，可作为辅助排查点）。

• 排查顶部定位元素的遮挡
  如果页面顶部存在position: fixed或position: sticky的元素，可能会覆盖目标<div>的顶部内边距区域，视觉上造成pt-12未生效的错觉。可临时给目标<div>添加背景色，或调整顶部定位元素的z-index，验证是否存在遮挡问题。

• 核对Tailwind配置的自定义修改
  虽然你已确认style.css中存在.pt-12，仍可检查tailwind.config.js里的spacing配置，确认是否被修改导致pt-12的实际值被设为0或极小数值（此情况p-12通常也会受影响，优先级较低但可快速排查）。

内容的提问来源于stack exchange，提问作者johnb928