p系列工具类是Tailwind预编译的原子类，用于设置内边距：pt/pb/pl/pr分别控制上/下/左/右，px/py控制水平/垂直双向，数值映射theme.spacing，默认单位rem。
什么是 p 系列工具类？
Tailwind 的 p 开头工具类（如 pt-2、px-4）是设置内边距（padding）的快捷方式，对应 CSS 的 padding 属性。它们不是“自定义类”，而是框架预编译好的原子类，直接作用于元素，无需写额外 CSS。
命名规则很直白：p = padding，后面加方向缩写（t/r/b/l/x/y），再加数值（如 1、4、8）。数值默认映射到 theme.spacing 配置，默认单位是 rem（如 px-4 → padding-left: 1rem; padding-right: 1rem;）。
pt、pb、pl、pr 各自控制哪一边？
单边控制类最常用于微调对齐或避免样式污染。比如按钮文字上移、卡片底部留白、表单项左对齐等场景，用单边比写完整 padding 更轻量。
-
pt-2：只设顶部内边距（padding-top） -
pb-3：只设底部内边距（padding-bottom） -
pl-1：只设左侧内边距（padding-left） -
pr-5：只设右侧内边距（padding-right）
注意：pl 在 RTL（右向左）布局中会自动转为 pr，前提是启用了 dir="rtl" 和 Tailwind 的 RTL 插件；否则它始终作用于物理左边界。
px 和 py 是什么？为什么比写两遍更安全？
px-4 = padding-left: 1rem; padding-right: 1rem;，py-2 = padding-top: 0.5rem; padding-bottom: 0.5rem;。它们不是语法糖，而是独立生成的类——这意味着即使你同时写了 px-4 py-2 和 pt-6，后者会覆盖 py-2 中的 pt 值，CSS 层叠逻辑依然成立。
容易踩的坑：
- 误以为
px-4会“保护”左右边距不被其他类影响 —— 实际上任何更具体的pl-8或pr-0都会覆盖它 - 在 flex 容器中滥用
py试图垂直居中内容 —— 这属于语义错位，应该用flex items-center或place-content - 数值超出配置范围（如用了
py-99但theme.spacing最大只到16），该类不会生效且无警告
如何快速查清某个 p 类实际输出的 CSS？
最可靠的方式是打开浏览器开发者工具，选中元素，在 Styles 面板里找对应规则。Tailwind 生成的类名和 CSS 值一一对应，例如 pt-3 一定展开为 padding-top: 0.75rem（假设 spacing.3 === '0.75rem'）。
如果你改过 tailwind.config.js 中的 theme.spacing，比如把 4 改成 '16px'，那么所有带 -4 的 p 类都会变成 16px，包括 px-4、py-4、pb-4 等——这点容易被忽略，尤其当团队多人协作、配置分散时。
调试建议：在 config 里保留注释说明自定义值来源，或用 spacing: { ...defaultTheme.spacing, xs: '4px' } 方式扩展而非覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
