尺寸
宽度
用来设置元素宽度的功能类
语法
0-3，步进0.5
| Class | Properties | 平台兼容性说明 |
|---|---|---|
| w-0 | width: 0px; | H5、小程序、app-vue、app-nvue |
| w-px | width: 1px; | H5、小程序、app-vue、app-nvue |
| w-0.5 | width: 0.125 * 1rem; | H5、小程序、app-vue |
| w-1 | width: 0.25 * 1rem; | H5、小程序、app-vue、app-nvue |
| w-1.5 | width: 0.375 * 1rem; | H5、小程序、app-vue、app-nvue |
| w-2 | width: 0.5 * 1rem; | H5、小程序、app-vue、app-nvue |
| w-2.5 | width: 0.625 * 1rem; | H5、小程序、app-vue、app-nvue |
| w-3 | width: 0.75 * 1rem; | H5、小程序、app-vue、app-nvue |
| w-3.5 | width: 0.875 * 1rem; | H5、小程序、app-vue、app-nvue |
4-12，步进1
| Class | Properties | 平台兼容性说明 |
|---|---|---|
| w-4 | width: 1rem; | H5、小程序、app-vue、app-nvue |
| w-5 | width: 1.25rem; | H5、小程序、app-vue、app-nvue |
| w-6 | width: 1.5rem; | H5、小程序、app-vue、app-nvue |
| w-7 | width: 1.75rem; | H5、小程序、app-vue、app-nvue |
| w-8 | width: 2rem; | H5、小程序、app-vue、app-nvue |
| w-9 | width: 2.25rem; | H5、小程序、app-vue、app-nvue |
| w-10 | width: 2.5rem; | H5、小程序、app-vue、app-nvue |
| w-11 | width: 2.75rem; | H5、小程序、app-vue、app-nvue |
| w-12 | width: 3rem; | H5、小程序、app-vue、app-nvue |
14
| Class | Properties | 平台兼容性说明 |
|---|---|---|
| w-14 | width: 3.5rem; | H5、小程序、app-vue、app-nvue |
16-64，进步4
| Class | Properties | 平台兼容性说明 |
|---|---|---|
| w-16 | width: 4rem; | H5、小程序、app-vue、app-nvue |
| w-20 | width: 5rem; | H5、小程序、app-vue、app-nvue |
| w-24 | width: 6rem; | H5、小程序、app-vue、app-nvue |
| w-28 | width: 7rem; | H5、小程序、app-vue、app-nvue |
| w-32 | width: 8rem; | H5、小程序、app-vue、app-nvue |
| w-36 | width: 9rem; | H5、小程序、app-vue、app-nvue |
| w-40 | width: 10rem; | H5、小程序、app-vue、app-nvue |
| w-44 | width: 11rem; | H5、小程序、app-vue、app-nvue |
| w-48 | width: 12rem; | H5、小程序、app-vue、app-nvue |
| w-52 | width: 13rem; | H5、小程序、app-vue、app-nvue |
| w-56 | width: 14rem; | H5、小程序、app-vue、app-nvue |
| w-60 | width: 15rem; | H5、小程序、app-vue、app-nvue |
| w-64 | width: 16rem; | H5、小程序、app-vue、app-nvue |
72、80、96
| Class | Properties | 平台兼容性说明 |
|---|---|---|
| w-72 | width: 18rem; | H5、小程序、app-vue、app-nvue |
| w-80 | width: 20rem; | H5、小程序、app-vue、app-nvue |
| w-96 | width: 24rem; | H5、小程序、app-vue、app-nvue |
auto
| Class | Properties | 平台兼容性说明 |
|---|---|---|
| w-auto | width: auto; | H5、小程序、app-vue |
百分比
TIP
- 为了框架多端兼容性，百分比语法由 tailwindcss 原来的
/连接符 替换为了-连接符
| Class | Properties | 平台兼容性说明 |
|---|---|---|
| w-1-2 | width: 50%; | H5、小程序、app-vue |
| w-1-3 | width: 33.333333%; | H5、小程序、app-vue |
| w-2-3 | width: 66.666667%; | H5、小程序、app-vue |
| w-1-4 | width: 25%; | H5、小程序、app-vue |
| w-2-4 | width: 50%; | H5、小程序、app-vue |
| w-3-4 | width: 75%; | H5、小程序、app-vue |
| w-1-5 | width: 20%; | H5、小程序、app-vue |
| w-2-5 | width: 40%; | H5、小程序、app-vue |
| w-3-5 | width: 60%; | H5、小程序、app-vue |
| w-4-5 | width: 80%; | H5、小程序、app-vue |
| w-1-6 | width: 16.666667%; | H5、小程序、app-vue |
| w-2-6 | width: 33.333333%; | H5、小程序、app-vue |
| w-3-6 | width: 50%; | H5、小程序、app-vue |
| w-4-6 | width: 66.666667%; | H5、小程序、app-vue |
| w-5-6 | width: 83.333333%; | H5、小程序、app-vue |
| w-1-12 | width: 8.333333%; | H5、小程序、app-vue |
| w-2-12 | width: 16.666667%; | H5、小程序、app-vue |
| w-3-12 | width: 25%; | H5、小程序、app-vue |
| w-4-12 | width: 33.333333%; | H5、小程序、app-vue |
| w-5-12 | width: 41.666667%; | H5、小程序、app-vue |
| w-6-12 | width: 50%; | H5、小程序、app-vue |
| w-7-12 | width: 58.333333%; | H5、小程序、app-vue |
| w-8-12 | width: 66.666667%; | H5、小程序、app-vue |
| w-9-12 | width: 75%; | H5、小程序、app-vue |
| w-10-12 | width: 83.333333%; | H5、小程序、app-vue |
| w-11-12 | width: 91.666667%; | H5、小程序、app-vue |
其他
| Class | Properties | 平台兼容性说明 |
|---|---|---|
| w-full | width: 100%; | H5、小程序、app-vue |
| w-screen | width: 100vw; | H5、小程序、app-vue |
| w-min | width: min-content; | H5、小程序、app-vue |
| w-max | width: max-content; | H5、小程序、app-vue |