基本宽度与高度

宽度用w-<值>来表示，高度用h-<值>来表示，w和h分别代表width和height，很好理解。

而<值>有很多种写法，最常见的写法就下面五种

写法示例	解释	尺寸是怎么计算的
`w-2`	值用数字表示	真实的值等于`数字 * 基本单位` 即生成的样式是`width: calc(var(--spacing) * 2)`
`h-1/2`	值用分数表示	分数值其实说的是百分比即生成的样式是`height: calc(1/2 * 100%)`
`w-auto`	值用单词`auto`表示	生成的样式是`width: auto`
`w-full`	值用单词`full`表示	生成的样式是`width: 100%`
`w-[35px]`	值写在中括号中，完全自定义的值，只要符合CSS标准即可	生成的样式是`width: 35px`

次常见的写法，是当需要按元素内部内容来决定元素尺寸时使用的，如下：

也有几个不常见的写法，仅在元素的宽高需要和视口的尺寸做联动时才用到，如下：

写法示例	解释	尺寸是怎么计算的
`w-screen`	值用单词`screen`表示，意思是视口的尺寸	生成的样式是`width:100vw`
`h-screen`	值用单词`screen`表示，意思是视口的尺寸	生成的样式是`height:100vh`
`w-dvw`, `w-dvh`, `w-lvw`, `w-lvh`, `w-svw`, `w-svh` `h-dvw`, `h-dvh`, `h-lvw`, `h-lvh`, `h-svw`, `h-svh` 等一坨	值中的`dv/lv/sv`分别代表动态视口(dynamic viewport)，大视口(large viewport)和小视口(small viewport)	生成的样式大致是`width: 100dvw`或`height: 100svh`这种

最后有一个特殊的<值>，专用来画那种1像素的狗比元素

写法示例	解释	尺寸是怎么计算的
`w-px`	值用`px`表示，意思是1像素	生成的样式是`width: 1px`

宽度与响应式设计有关，所以在宽度这里，可以使用容器断点来表示宽度

容器断点3xs/2xs/xs/sm/md/lg/xl/2xl/3xl/.../7xl等单词，可以用来表示宽度，但不能用来表示高度。这也很好理解，宽度是响应式设计的核心，高度不是。

下面举两个例子：

写法示例	尺寸是怎么计算的
`w-sm`	生成的样式： `width: var(--container-sm)`，即24rem，384像素
`w-2xl`	生成的样式： `width: var(--container-2xl)`，即42rem，672像素

简单来说，就是w-30 h-30和size-30是等价的，只不过在size-后面是不能跟容器断点的

基础宽高用的是w-和h-，生成的样式分别是width和height。

而min-width-, max-width-, min-height, max-height这四个东西，语法用法和上面的基础宽高一样，但生成的样式分别是min-width, max-width, min-height, max-height这四个属性

这四个属性，在元素明确的设定了宽高值时，是没有卵用的。比如size-30 min-w-20 max-w-20这种东西，后面的min-w-20和max-w-20是没有意义的。

仅在元素本身的宽高是通过百分比等其它手段间接设置时，min/max-h/w-这种东西才有作用，也很好理解。