快速查询间距、宽高、圆角等尺寸值，点击可复制对应 class
用于 margin 和 padding 的间距值
| Class | Rem | Px | 预览 |
|---|---|---|---|
{{ cls }} | {{ val.rem }}rem | {{ val.px }}px | {{ Math.min(val.px, 1000) }}px |
用于 width 和 height 的尺寸值
| Class | Rem | Px | 预览 |
|---|---|---|---|
{{ cls }} | {{ val.rem }}rem | {{ val.px }}px | {{ Math.min(val.px/2, 500) }}×{{ Math.min(val.px/2, 20) }}px |
用于设置元素圆角的半径值
| Class | Rem | Px | 预览 |
|---|---|---|---|
rounded-{{ cls }} | {{ val.rem === 9999 ? '9999' : val.rem }}rem | {{ val.px === 9999 ? '9999' : val.px }}px |
用于 margin 和 padding 的间距值，支持所有方向：mt-, mr-, mb-, ml-, mx-, my-, pt-, pr-, pb-, pl-, px-, py-
| Class | Rem | Px | 预览 |
|---|---|---|---|
{{ cls }} | {{ val.rem }}rem | {{ val.px }}px | {{ Math.min(val.px, 1000) }}px |
用于 width 和 height 的尺寸值，同时适用于 max-width, min-width, max-height, min-height
| Class | Rem | Px | 预览 |
|---|---|---|---|
{{ cls }} | {{ val.rem }}rem | {{ val.px }}px | {{ Math.min(val.px/2, 500) }}×{{ Math.min(val.px/2, 20) }}px |
用于设置元素圆角的半径值，支持各个角：rounded-tl-, rounded-tr-, rounded-bl-, rounded-br-
| Class | Rem | Px | 预览 |
|---|---|---|---|
rounded-{{ cls }} | {{ val.rem === 9999 ? '9999' : val.rem }}rem | {{ val.px === 9999 ? '9999' : val.px }}px |
间距类包括 margin（m-*）和 padding（p-*）系列，用于快速设置元素外边距和内边距，例如 m-4、pt-6、px-2 等。
Tailwind 默认使用基于 0.25rem 的间距单位（1 = 0.25rem），例如 m-4 = 1rem，也支持 auto 和百分比值。
可以使用组合类，如 mt-4（上外边距）、mb-2（下外边距）、px-6（左右内边距）、py-3（上下内边距）等。
宽度类使用 w-*，支持固定值（w-0~w-96）、百分比（w-1/2、w-1/3）、屏幕宽度（w-screen）以及 min/max 宽度。
高度类使用 h-*，支持固定值（h-0~h-96）、屏幕高度（h-screen）、最小高度 min-h-*、最大高度 max-h-*。
使用 rounded-* 类，如 rounded、rounded-sm、rounded-md、rounded-lg、rounded-full，还可以单独设置某一边或角，如 rounded-t-lg。
是的，可以在 tailwind.config.js 中扩展 spacing 配置，自定义新的 m-* 或 p-* 值，以满足项目需求。
是的，可以通过响应式前缀设置不同屏幕尺寸的尺寸类，如 sm:w-1/2、md:mt-4、lg:rounded-lg 等。
可以自由组合，如 <div class="w-1/2 h-32 p-4 mt-6 rounded-lg">，一次性设置宽、高、内边距、外边距和圆角。
尺寸类原子化、可组合，开发者无需写自定义 CSS 即可快速控制布局、间距和元素大小，提高开发效率和可维护性。
可以使用 min-w-*, max-w-*, min-h-*, max-h-* 类，确保元素在不同屏幕和内容变化下保持合理尺寸。
px-* 表示左右内边距，py-* 表示上下内边距，类似 mx-* 表示水平外边距，my-* 表示垂直外边距。
w-full 表示元素宽度填满父容器，h-full 表示高度填满父容器，常用于布局占满空间的元素。
使用 rounded-full 类，可以把正方形或长方形元素完全圆化，常用于头像、按钮等。
是的，可使用 w-auto、h-auto 类，使元素根据内容自适应大小，而不是固定宽高。
提供了 m-*、p-*、mx-*、my-*、px-*、py-* 系列类，方便快速设置外边距和内边距。
表示宽度为父容器的 1/2、1/3，用于快速布局响应式网格和列分布。
可配合 flex 布局快速设置元素大小、间距和对齐，例如 flex 子元素设置 w-1/3、h-32、p-4 等。
适合新手快速理解布局与间距概念，也适合高级开发者快速组合原子类构建页面。
通过查看速查表、实践组合不同类、观察布局效果，并参考官方文档和 Playground，可快速掌握 Tailwind 尺寸类用法。