49. 逻辑属性工具类

做国际化项目时有个经典坑：你用 ml-4 给按钮左侧加间距，一切正常。但一切换到阿拉伯语（RTL），间距跑到了右边——因为 margin-left 是物理方向，不会跟着书写方向翻转。逻辑属性就是来解决这个问题的。

物理属性 vs 逻辑属性

物理属性：固定方向

物理属性使用固定的方位词（left、right、top、bottom），不随书写方向变化。

<!-- 无论 LTR 都是左边距 1rem -->
<div class="ml-4">左边距</div>
<div class="mr-4">右边距</div>
<div class="pl-4">左内距</div>
<div class="pr-4">右内距</div>

逻辑属性：跟随书写方向

逻辑属性使用相对于文本流的方向（inline/block），自动适配 LTR 和 RTL。

<!-- LTR 下等于左边距，RTL 下自动变为右边距 -->
<div class="ms-4">起始边距</div>
<div class="me-4">结束边距</div>
<div class="ps-4">起始内距</div>
<div class="pe-4">结束内距</div>

对应关系速查

物理属性	逻辑属性	LTR 等价	RTL 等价
ml-*	ms-*	ml-*	mr-*
mr-*	me-*	mr-*	ml-*
pl-*	ps-*	pl-*	pr-*
pr-*	pe-*	pr-*	pl-*
left-*	inset-s-*	left-*	right-*
right-*	inset-e-*	right-*	left-*
top-*	inset-bs-*	top-*	top-*
bottom-*	inset-be-*	bottom-*	bottom-*

inline 与 block 轴

理解逻辑属性的关键是理解两个轴：

• inline 轴：文本排列的方向。LTR 下是水平方向，RTL 下也是水平方向（但方向相反）。垂直书写模式下是垂直方向。
• block 轴：段落堆叠的方向。通常是垂直方向。

inline-size 与 block-size

<!-- inline-size：逻辑宽度（LTR=width，垂直书写=height） -->
<div class="inline-size-64">逻辑宽度 16rem</div>

<!-- block-size：逻辑高度（LTR=height，垂直书写=width） -->
<div class="block-size-32">逻辑高度 8rem</div>

min/max 逻辑尺寸

<!-- 最小逻辑宽度 -->
<div class="min-inline-size-0">最小宽度为 0</div>

<!-- 最大逻辑高度 -->
<div class="max-block-size-screen">最大高度为视口高度</div>

inset 系列：定位偏移

逻辑属性的 inset 系列替代了物理的 top/right/bottom/left。

基础用法

<!-- inset-inline-start：LTR 下等于 left -->
<div class="inset-s-0">起始边贴齐</div>

<!-- inset-inline-end：LTR 下等于 right -->
<div class="inset-e-0">结束边贴齐</div>

<!-- inset-block-start：逻辑顶部 -->
<div class="inset-bs-0">顶部贴齐</div>

<!-- inset-block-end：逻辑底部 -->
<div class="inset-be-0">底部贴齐</div>

简写形式

<!-- 同时设置 inline 起止 -->
<div class="inset-x-4">左右各 1rem</div>

<!-- 同时设置 block 起止 -->
<div class="inset-y-4">上下各 1rem</div>

边距与内边距的逻辑版本

margin 逻辑属性

<!-- 四个方向的逻辑边距 -->
<div class="ms-4">起始水平边距</div>
<div class="me-4">结束水平边距</div>
<div class="mbs-4">起始垂直边距（顶部）</div>
<div class="mbe-4">结束垂直边距（底部）</div>

<!-- 同时设置 inline 起止（水平方向） -->
<div class="ms-4 me-4">水平方向边距</div>

<!-- 同时设置 block 起止（垂直方向） -->
<div class="mbs-4 mbe-4">垂直方向边距</div>

padding 逻辑属性

<!-- 四个方向的逻辑内边距 -->
<div class="ps-4">起始水平内边距</div>
<div class="pe-4">结束水平内边距</div>
<div class="pbs-4">起始垂直内边距</div>
<div class="pbe-4">结束垂直内边距</div>

<!-- 同时设置 inline 起止（水平方向） -->
<div class="ps-4 pe-4">水平方向内边距</div>

<!-- 同时设置 block 起止（垂直方向） -->
<div class="pbs-4 pbe-4">垂直方向内边距</div>

边框的逻辑属性

逻辑边框方向

<!-- 起始边边框 -->
<div class="border-s-2">起始边 2px 边框</div>

<!-- 结束边边框 -->
<div class="border-e-2">结束边 2px 边框</div>

<!-- 起始块边框 -->
<div class="border-bs-2">顶部 2px 边框</div>

<!-- 结束块边框 -->
<div class="border-be-2">底部 2px 边框</div>

逻辑边框圆角

<!-- 起始边圆角 -->
<div class="rounded-s-lg">起始边圆角</div>

<!-- 结束边圆角 -->
<div class="rounded-e-lg">结束边圆角</div>

实际应用场景

场景一：图标按钮间距

<!-- 物理属性：RTL 时间距在错误位置 -->
<button class="pl-3 pr-2">
  <span class="mr-2">图标</span>
  按钮文字
</button>

<!-- 逻辑属性：自动适配方向 -->
<button class="ps-3 pe-2">
  <span class="me-2">图标</span>
  按钮文字
</button>

场景二：侧边栏布局

<!-- 物理属性：需要为 RTL 写覆盖样式 -->
<aside class="border-r border-gray-200">侧边栏</aside>

<!-- 逻辑属性：自动翻转 -->
<aside class="border-e border-gray-200">侧边栏</aside>

场景三：绝对定位元素

<!-- 物理属性 -->
<div class="absolute top-0 right-0">右上角</div>

<!-- 逻辑属性：RTL 下自动变为左上角 -->
<div class="absolute inset-bs-0 inset-e-0">结束边顶部</div>

场景四：文本缩进

<!-- 物理属性：RTL 下缩进方向错误 -->
<p class="indent-4">段落缩进</p>

<!-- 逻辑属性：始终从文本起始方向缩进 -->
<p class="indent-4">段落缩进</p>

逻辑属性与响应式/状态变体

逻辑属性工具类完全支持 Tailwind 的变体和响应式前缀：

<!-- 响应式逻辑边距 -->
<div class="ms-2 md:ms-4 lg:ms-6">
  响应式起始边距
</div>

<!-- 状态变体 -->
<div class="hover:border-e-2 hover:border-e-blue-500">
  悬停时结束边显示蓝色边框
</div>

<!-- 深色模式 -->
<div class="dark:border-e-gray-700">
  深色模式下的结束边边框
</div>

迁移指南：从物理属性到逻辑属性

如果你的 v3 项目使用了 start-* / end-* 工具类，需要迁移到 v4 的新命名：

v3 旧类（已废弃）	v4 新类
start-4	inset-s-4
end-4	inset-e-4
rounded-s-lg	rounded-s-lg
rounded-e-lg	rounded-e-lg

# 使用查找替换批量迁移
# 旧类 → 新类
start- → inset-s-
end- → inset-e-

逻辑属性速查表

类别	工具类	CSS 属性	说明
尺寸	inline-size-*	inline-size	逻辑宽度
尺寸	block-size-*	block-size	逻辑高度
边距	ms-* / me-*	margin-inline-start/end	水平起止边距
边距	mbs-* / mbe-*	margin-block-start/end	垂直起止边距
内边距	ps-* / pe-*	padding-inline-start/end	水平起止内距
内边距	pbs-* / pbe-*	padding-block-start/end	垂直起止内距
定位	inset-s-* / inset-e-*	inset-inline-start/end	水平起止偏移
定位	inset-bs-* / inset-be-*	inset-block-start/end	垂直起止偏移
边框	border-s-* / border-e-*	border-inline-start/end-width	水平边框
圆角	rounded-s-* / rounded-e-*	border-start-start-radius 等	起止圆角