间距 Spacing
AD UI 规范了间距的数字必须被 4 整除，默认的配置中包含了 -500 ~ 500 内的数字。
相关 CSS 属性：margin padding width height 及这四个属性的子属性
完整的 spacing 配置：
const spacing = {}
for (let index = 0; index <= 500; index += 4) {
spacing[index] = `${index}${index === 0 ? "" : "px"}`
}
// tailwind.config.js
module.exports = { theme: { spacing } }示例
类名
值
w-0
0px
w-4
4px
w-8
8px
w-12
12px
w-16
16px
w-20
20px
w-24
24px
w-28
28px
w-32
32px
w-36
36px
w-40
40px
w-44
44px
w-48
48px
w-52
52px
w-56
56px
w-60
60px
w-64
64px
w-68
68px
w-72
72px
w-76
76px
w-80
80px
w-84
84px
w-88
88px
w-92
92px
w-96
96px
w-100
100px
w-104
104px
w-108
108px
w-112
112px
w-116
116px
w-120
120px
w-124
124px
w-128
128px
w-132
132px
w-136
136px
w-140
140px
w-144
144px
w-148
148px
w-152
152px
w-156
156px
w-160
160px
w-164
164px
w-168
168px
w-172
172px
w-176
176px
w-180
180px
w-184
184px
w-188
188px
w-192
192px
w-196
196px
w-200
200px
收起代码
const spacing = {}
for (let index = 0; index <= 200; index += 4) {
spacing[index] = `${index}${index === 0 ? "" : "px"}`
}
return (
<Table
className="w-full"
dataSource={Object.keys(spacing).map((o) => ({
value: o,
}))}
columns={[
{
dataIndex: "class",
title: "类名",
width: 200,
render: ({ value }) => `w-${value}`,
},
{
dataIndex: "value",
title: "值",
width: 200,
render: ({ value }) => `${value}px`,
},
{
dataIndex: "length",
title: "",
render: ({ value }) => (
<div className={`h-20 bg-tp-gray-300 rounded-6 w-${value}`} />
),
},
]}
/>
)