Tailwind Size

CSS元素的尺寸包括宽度width和高度height两个属性，Tailwind设置尺寸的单位包括rem、百分比、px、vw以及auto。

• 宽度
• 最小宽度
• 最大宽度
• 高度
• 最小高度
• 最大高度

宽度（width）

Tailwind为宽度设置提供了不同单位形式的工具类，主要分为4种类型

• 自动宽度
• 固定宽度
• 弹性宽度
• 视口宽度

自动宽度（auto）

Tailwind使用.w-auto工具类让浏览器根据元素内容自动计算其宽度，为元素的默认宽度。

.w-auto{ width: auto; }

固定宽度（number）

固定宽度主要使用.w-{number}和.w-px两种类型，其中number为rem相对单位，px为像素绝对单位。以rem为单位时，每个单位为0.25rem，即一个字号的1/4大小。

.w-1{ width: 1rem; }

固定宽度

弹性宽度（fraction）

Tailwind采用.w-full和.w-{fraction}形式命名的工具类为页面元素设置一个基于百分比的可变宽度，也就时常见的栅格布局。

.w-full{ width: 100%; }

类名	属性
w-1/2	width:50%;
w-1/3	width:33.3%;
w-1/4	width:25%;
w-2/4	width:50%;
w-3/4	width:75%;
w-1/5	width:20%
w-2/5	width:40%;
w-3/5	width:60%;
w-4/5	width:75%;
w-1/6	width:16.66%;
w-2/6	width:33.33%;
w-3/6	width:50%;
w-4/6	width:66.66%;
w-5/6	width:83.33%;
w-1/12	width:8.33%;
w-2/12	width:16.66%;
w-3/12	width:25%;
w-4/12	width:33.33%;
w-5/12	width:41.66%;
w-6/12	width:50%;
w-7/12	width:58.33%;
w-8/12	width:66.66%;
w-9/12	width:75%;
w-10/12	width:83.33%;
w-11/12	width:91.66%;
w-full	width:100%;

fraction

视口宽度（screen）

Tailwind使用.w-screen工具类设置元素宽度为页面视口（viewport）宽度，视口默认宽度为100vw。

.w-screen{ width: 100vw; }

vw和vh是屏幕视口单位viewport units，视口viewport是浏览器窗口大小的单位，不受屏幕分辨率影响，可用于不同分辨率屏幕自适应处理。

vw全称为viewport width表示可视窗口的宽度单位，和百分比类似，1vw表示可视窗口viewport宽度的1/100。与百分比不同的是vw始终是相对于可视窗口的窗口，而百分比则是相对父级元素的。

最小宽度（min）

min-width属性用于设置页面元素的最小宽度，Tailwind提供了min-w-前缀的工具类用于设置min-width属性。

正常情况下，当父级盒子容器内部元素宽度宽度小于父级容器的min-width时，父级容器的宽度为min-width。当父级盒子容器的内容宽度大于min-width时，父级容器会随着内容的增加而被撑大，没有上限，但父级容器的宽度最小值却是设置的min-width最小宽度的值。

工具类	属性
min-w-0	min-width:0
min-w-full	min-width:100%

最大宽度（max）

CSS中max-width属性用于设置页面元素的最大宽度，Tailwind提供了.max-w-{size}前缀的工具类以设置max-width属性。

max-width属性不包括填充、边框、页边距，只是元素内容区域的最大宽度。max-width属性会对元素的宽度设置一个最大的限制，元素可以比指定值窄，但不能比它宽，而且不允许指定负值。

工具类	属性
max-w-xs	max-width:20rem;
max-w-sm	max-width:24rem;
max-w-md	max-width:28rem;
max-w-lg	max-width:32rem;
max-w-xl	max-width:36rem;
max-w-2xl	max-width:42rem;
max-w-3xl	max-width:48rem;
max-w-4xl	max-width:56rem;
max-w-5xl	max-width:64rem;
max-w-6xl	max-width:72rem;
max-w-full	max-width:100%;
max-w-screen-sm	max-width:640px;
max-w-screen-md	max-width:768px;
max-w-screen-lg	max-width:1024px;
max-w-screen-xl	max-width:1280px;
max-w-none	max-width:none;

高度（height）

• 自动高度（auto）
• 屏幕高度（screen）
• 固定高度（fixed）
• 弹性高度（full）

自动高度（auto）

当为元素设置height为auto自动时，元素会根据内容自动调节元素高度。auto是height属性的默认值，浏览器会根据元素内容自动计算出实际高度。

.h-auto{ height:auto; }

屏幕高度（screen）

屏幕高度使用vh作为单位，vh表示viewport height视口高度。使用vh作为单位的元素的实际高度是相对于viewport视口的高度，视口viewport会被划分成为100个单位的vh， 1vh也就是等于视口高度的1%。

视口（viewport）在PC端指的是浏览器的可视区域，在移动端指的是Layout Viewport。因为移动端的视口分为三种分别是：布局视口（Layout Viewport）、视觉视口（Visual Viewport）、理想视口（Ideal Viewport）。

Viewport

.h-screen{ height: 100vh; }

固定高度（fixed）

固定高度使用h-{number}或h-px工具类来设置元素的高度

工具类	属性
h-px	height:1px;
h-0	height:0;
h-1	height:0.25rem;
h-2	height:0.5rem;
h-3	height:0.75rem;
h-4	height:1rem;
h-5	height:1.25rem;
h-6	height:1.5rem;
h-8	height:2rem;
h-10	height:2.5rem;
h-12	height:3rem;
h-16	height:4rem;
h-20	height:5rem;
h-24	height:6rem;
h-32	height:8rem;
h-40	height:10rem;
h-48	height:12rem;
h-56	height:14rem;
h-64	height:16rem;

最小高度（min）

CSS中min-height属性用于设置页面元素的最小高度，Tailwind采用.min-h-{size}工具类的方式设置min-height。

工具类	描述
min-h-0	min-height:0;
min-h-full	min-height:100%;
min-h-screen	min-height:100vh;

最大高度（max）

CSS中max-height属性用于设置元素的最大高度，Tailwind使用.max-h-{size}来设置max-height属性。

工具类	描述
max-h-full	max-height:100%;
max-h-screen	max-height:100vh;