排版样式
字体集合（font family）
Tailwind默认采用三种网络安全的字体集合，分别是sans、serif、mono
| 工具类 | 说明 |
|---|---|
| font-mono | 等宽字体，每个字母宽度相等，用于模拟命令行输入和打字机效果，用于呈现程序代码。 |
| font-serif | 衬线字体，即字体末端带有装饰线，相对活泼但不够清晰，可做正文。 |
| font-sans | 非衬线字体，正式、庄重，可做标题。 |
字号大小（font size）
Tailwind使用text-{size}工具类设置CSS中的font-size属性，字体大小采用rem作为相对长度单位。
rem是指相对于根元素<html>的font-size计算值的大小，可简单理解为屏幕宽度的百分比。
为什么会采用rem最为字体的单位呢？因为常见px像素单位是一个固定单位，字号大小会直接被定死，无法随着浏览器进行伸缩。而rem或em则是相对单位，字号不会被定死，可随着参考点的缩放而缩放。
rem与em都是使用元素设置字体大小，不同的是em是根据父级元素来设置大小，而rem根据指定html根元素的字符大小来设置的。比如从IE6到Chrome浏览器中，默认html根元素的font-size都是16px，若使用rem来设置12px的字体，则需要转换计算为 12px / 16px = 0.75rem。
| 工具类 | 属性 |
|---|---|
| text-xs | font-size:0.75rem; |
| text-sm | font-size:0.875rem; |
| text-base | font-size:1rem; |
| text-lg | font-size:1.125rem; |
| text-xl | font-size:1.25rem; |
| text-2xl | font-size:1.5rem; |
| text-3xl | font-size:1.875rem; |
| text-4xl | font-size:2.25rem; |
| text-5xl | font-size:3rem; |
| text-6xl | font-size:4rem; |
典型的字号大小的单位转换
| px | rem | percent | point | remark |
|---|---|---|---|---|
| 6px | 0.375rem | 37.5% | 5pt | 6px / 16px = 0.375rem = 37.5% |
| 7px | 0.438rem | 43.8% | 5pt | 7px / 16px = 0.438rem= 43.8% |
| 8px | 0.500rem | 50% | 6pt | 8px / 16px = 0.500rem= 50.0% |
| 9px | 0.563rem | 56.3% | 7pt | 9px / 16px = 0.563rem= 56.3% |
| 10px | 0.625rem | 62.5% | 8pt | 10px / 16px = 0.625rem= 62.5% |
| 11px | 0.688rem | 68.8% | 8pt | 11px / 16px = 0.688rem= 68.8% |
| 12px | 0.750rem | 75.0% | 9pt | 12px / 16px = 0.750rem= 75.0% |
| 13px | 0.813rem | 81.3% | 10pt | 13px / 16px = 0.813rem= 81.3% |
| 14px | 0.875rem | 87.5% | 11pt | 14px / 16px = 0.875rem= 87.5% |
| 15px | 0.938rem | 93.8% | 11pt | 15px / 16px = 0.938rem= 93.8% |
| 16px | 1.000rem | 100.0% | 12pt | 16px / 16px = 1.000rem = 100.0% |
字体平滑（font smoothing）
font-smoothing是非标准的CSS字体渲染规则，由于不同操作系统对字体渲染方式不同，不同浏览器也有对样式的一套解释规则，所以font-smoothing暂时没有加入到web标准中。font-smoothing主要是对字体的锯齿化进行调整以提升字体的平滑度。
-webkit-font-smoothing属性CSS3中用于MacOS的Webkit引擎中设置字体的抗锯齿或光滑度属性
-webkit-font-smoothing{ none| antialiased | subpixel-antialiased }
| 属性值 | 描述 |
|---|---|
| none | 用于低像素的文本 |
| antialiased | 抗锯齿 |
| subpixel-antialiased | 浏览器默认 |
Tailwind提供了两个工具类用于设置字体平滑度
| 工具类 | 属性 |
|---|---|
| antialiasd | -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; |
| subpixel-antialiased | -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; |
字体样式（font style）
| 工具类 | 属性 |
|---|---|
| italic | font-style:italic; |
| not-italic | font-style:normal; |
字体粗细（font-weight）
Tailwind使用.font-{weight}工具类设置CSS中font-weight属性以控制字体粗细
| 工具类 | 属性 |
|---|---|
| font-hairline | font-weight:100; |
| font-thin | font-weight:200; |
| font-light | font-weight:300; |
| font-normal | font-weight:400; |
| font-medium | font-weight:500; |
| font-semibold | font-weight:600; |
| font-bold | font-weight:700; |
| font-extrabold | font-weight:800; |
| font-black | font-weight:900; |
字间距（Letter Spacing）
CSS中使用letter-spacing属性以增减字符之间的空白间距，简单来说就是用来定位在文本字符框之间插入多少空白空间。这里的letter表示是字符，如果是英文则表示一个字母，如果是中文则表示一个汉字。letter-spacing允许设置负值。
letter-spacing属性值
letter-spacing: normal | <length>;
| 属性值 | 描述 |
|---|---|
| normal | 按当前字体正常间距确定，与0不同的是用户代理会根据它来确定文字的默认对齐方式。 |
| <length> | 指定文字间距以替代默认间距，可以是负值。 |
| 工具类 | 属性 |
|---|---|
| tracking-tighter | letter-spacing:-0.05em; |
| tracking-tight | letter-spacing:-0.025em; |
| tracking-normal | letter-spacing:0; |
| tracking-wide | letter-spacing:0.025em; |
| tracking-wider | letter-spacing:0.05em; |
| tracking-widest | letter-spacing:0.1em; |
行高（leading）
CSS中使用line-height属性设置行高，也就是行与行之间的距离，行高不允许为负值。line-height会影响行框的布局，使用line-height与font-size的计算差值的一半儿，分别加到一个文本行内容的顶部和底部，可以包含这些内容的最小框就是行框。如果应用到一个块级元素上，则定义的是元素中基线之间的最小距离而非最大距离。
line-height: normal | number | length | % | inherit;
line-height行高是指文本行基线之间的垂直距离，基线（base line）并不是汉字文字的下端沿线，而是英文字母x的下端沿线。
Tailwind中使用.leading-{size}工具类定义行高属性
| 工具类 | 属性 |
|---|---|
| leading-none | line-height:1; |
| leading-tight | line-height:1.25; |
| leading-snug | line-height:1.375; |
| leading-normal | line-height:1.5; |
| leading-relaxed | line-height:1.625; |
| leading-loose | line-height:2; |
| leading-3 | line-height:.75rem; |
| leading-4 | line-height:1rem; |
| leading-5 | line-height:1.25rem; |
| leading-6 | line-height:1.5rem; |
| leading-7 | line-height:1.75rem; |
| leading-8 | line-height:2rem; |
| leading-9 | line-height:2.25rem; |
| leading-10 | line-height:2.5rem; |
文本对齐（text alignment）
CSS中使用text-align属性来控制文本水平对齐方式，text-align属性通过指定行框与哪个点对齐，从而设置块级元素内部文本的水平对齐方式。允许用户代理调整行中内容和字之间的间隔。text-align支持justify值。不同用户代理可能会得到不同的结果。
text-align属性定义的是行中内容如何相对于块级父元素对齐，并不控制块级元素自己的对齐。
text-align: left | center | right | justify | justify-all | inherit;
text-align的默认值取决于direction方向属性，如果direction属性为ltr则默认值为left。如果direction属性为rtl则为right。
| 属性值 | 描述 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两侧对齐 |
| justify-all | 两端对齐 |
Tailwind提供了基于.text-前缀的工具类用于设置text-align属性
| 工具类 | 属性 |
|---|---|
| text-left | text-align:left; |
| text-right | text-align:right; |
| text-center | text-align:center; |
| text-justify | text-align:justify; |
文本颜色（text color）
Tailwind提供了.text-{color}-{brightness}格式的工具类来控制CSS中的color属性
| 颜色 | 描述 |
|---|---|
| transparent | 透明 |
| black | 黑色 |
| white | 白色 |
| gray | 灰色 |
| red | 红色 |
| orange | 橙色 |
| yellow | 黄色 |
| green | 绿色 |
| teal | 青色，蓝绿，墨绿，湖水绿 |
| blue | 蓝色 |
| indigo | 靛蓝，紫蓝色 |
| purple | 紫罗蓝 |
| pink | 粉色 |
有彩色使用100~900共计9个明度将颜色划分为不同饱和度的颜色
| 工具类 | 属性 |
|---|---|
| text-transparent | color:transparent; |
| text-black | color:#000; |
| text-white | color:#fff; |
| text-gray-100 | color:#f7fafc; |
文本透明度（text opacity）
Tailwind提供的.text-opacity-{amount}用于设置字体颜色的透明度，透明度分为5个等级。
| 工具类 | 属性 |
|---|---|
| text-opacity-0 | --text-opacity:0 |
| text-opacity-25 | --text-opacity:0.25 |
| text-opacity-50 | --text-opacity:0.5 |
| text-opacity-75 | --text-opacity:0.75 |
| text-opacity-100 | --text-opacity:1 |
文本装饰（text decoration）
CSS的text-decoration属性用于对文本内容进行装饰或修饰，比如常见的上划线、下划线、删除线等。
text-decoration: none | underline | overline | line-through | blink | inherit;
| 属性值 | 描述 |
|---|---|
| none | 默认，标准文本。 |
| underline | 设置文本下划线 |
| overline | 设置文本上划线 |
| line-through | 设置文本删除线 |
| blink | 设置文本闪烁 |
| inherit | 继承父类文本修饰值 |
Tailwind提供了常用的文本装饰工具类
| 工具类 | 属性 |
|---|---|
| underline | text-decoration:underline; |
| line-through | text-decoration:line-through; |
| no-underline | text-decoration:none; |
文本转换（text transform）
CSS提供的text-transform属性用于改变元素中的字母大小写
text-transform: none | capitalize | uppercase | lowercase | inherit;
| 属性值 | 描述 |
|---|---|
| none | 默认，标准文本 |
| capitalize | 文本中每个英文单词首字母大写 |
| uppercase | 文本中英文字母转换为大写 |
| lowercase | 文本中英文字母转换为小写 |
Tailwind提供常用工具类用于text-transform
| 工具类 | 属性 |
|---|---|
| uppercase | text-transform:uppercase; |
| lowercase | text-transform:lower; |
| capitalize | text-transform:capitalize; |
| normal-case | text-transform:none; |
垂直对齐（vertical alignment）
CSS中的vertical-align属性用于设置行内元素在行框中垂直居中的位置，它对块级元素无效，且无法被子元素继承。vertical-align属性定义了行内 元素的基线相对于该 元素所在行的基线的垂直对齐方式，允许指定负长度值和百分比值，但这会使元素降低而不是升高。在表单元格table-cell中，vertical-align可以用来设置单元格框中单元内内容的垂直对齐方式。
在垂直对齐中，行内非替换元素的行内级框是由line-height的高度定义的框，也就是说在内容区的上下各会添加半个line-height后的框，其它行内元素的行内框是由margin-box定义的框。因此，对于一个行内框来说，top是指框的上边界，bottom是指框的下边界，text-top是指内容区的上边界，text-bottom是指内容区的下边界。
| 属性值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标 |
| bottom | 将元素的顶端与行中最低的元素的顶端对齐 |
| text-bottom | 将元素的底端与父元素字体的底端对齐 |
| middle | 将元素放置在父元素的中部 |
| super | 垂直对齐文本的上标 |
| text-top | 将元素的顶端与父元素字体的顶端对齐 |
| top | 将元素的顶端与行中最高元素的顶端对齐 |
Tailwind使用.align-{position}的形式定义vertical-align属性常用的工具类
| 工具类 | 属性 |
|---|---|
| align-base | vertical-align:baseline; |
| align-bottom | vertical-align:bottom; |
| align-text-bottom | vertical-align:text-bottom; |
| align-middle | vertical-align:middle; |
| align-top | vertical-align:top; |
| align-text-top | vertical-align:text-top; |
空白（whitespace）
CSS的white-space属性用于设置元素内容中空白的处理方式，这里的空白指的是空白字符，包括空格、制表符等空白字符，因此可以用来设置段落文本换行的方式。
white-space: normal | pre | nowrap | pre-wrap | pre-line | inherit;
| 属性值 | 描述 |
|---|---|
| normal | 默认，浏览器忽略空白，合并空格即相邻空格合并成一个， |
| pre | 空白被浏览器保留，其行为方式类似HTML中的<pre>标签。 |
| nowrap | 文本不换行，即文本会在同一行上继续，直到遇到<br>换行标签。 |
| pre-wrap | 保留空白字符序列并正常的进行换行 |
| pre-line | 合并空白字符序列并保留换行符 |
Tailwind使用.whitespace-前缀的方式定义white-space属性
| 工具类 | 属性 |
|---|---|
| whitespace-normal | white-space:normal; |
| whitespace-no-wrap | white-space:nowrap; |
| whitespace-pre | white-space:pre; |
| whitespace-pre-line | white-space:pre-line; |
| whitesapce-pre-wrap | white-space:pre-wrap; |
换行（word break）
CSS中的word-break属性用于单词内的断句，即规定了自动换行的处理方式。word-break属性指定的非CJK脚本的断行规则，CJK脚本是指中日韩的脚本。通常浏览器自身带有文本自动换行的功能，在CSS3中可以使用word-break属性来自行决定自动换行的处理方式。
word-break: normal | break-all | keep-all;
| 属性值 | 描述 |
|---|---|
| normal | 使用浏览器默认的换行规则 |
| break-all | 允许在单词内换行 |
| keep-all | 只能在半角空格或连字符处换行 |
Tailwind提供以break-前缀的工具类使用word-break属性
| 工具类 | 属性 |
|---|---|
| break-normal | word-break:normal; overflow-wrap;normal; |
| break-words | overflow-wrap:break-word; |
| break-all | word-break:break-all; |
| truncate | overflow:hidden; text-overflow:ellipsis; white-space:nowrap; |
列表标记（list style）
CSS中list-style-type属性用于设置列表项标记的类型，经常会在有序列表ol和无序列表ul中使用到。若需要同时设置多个列表属性，可使用list-style属性，list-style属性可以同时声明list-style-type、list-style-position、list-style-image三个属性。
- list-style-type 列表项标记的类型
- list-style-position 列表项标记放置的位置
- list-style-image 使用图像来替代列表项标记
list-style-type
list-style-type: none | disc | decimal | ...;
| 属性值 | 描述 |
|---|---|
| none | 无标记 |
| disc | 默认，标记为实心圆。 |
| decimal | 标记为数字 |
Tailwind中采用list-前缀工具类定义了常用的list-style-type标记类型
| 工具类 | 属性 |
|---|---|
| list-none | list-style-type:none; |
| list-disc | list-style-type:disc; |
| list-decimal | list-style-type:decimal; |
list-style-position
CSS中list-style-position属性用于设置列表中列表项目标记的位置
list-style-position: inside | outside | inherit;
| 属性值 | 描述 |
|---|---|
| inside | 列表项标记位于文本以内，环绕文本，根据标记对齐。 |
| outside | 默认值，保持标记位于文本左侧，列表项标记位于文本以外，且环绕文本，不根据标记对齐。 |
Tailwind采用list-inside和list-outside两个工具类定义了list-style-position属性。
| 工具类 | 属性 |
|---|---|
| list-inside | list-style-position:inside; |
| list-outside | list-style-position:outside; |
占位符（placeholder）
Tailwind提供了.placeholder-前缀的工具类用于设置占位符的颜色和透明度
-
.placeholder-{color}-{size}用于设置占位符的颜色 -
.placeholder-opacity-{number}用于设置占位符文本的透明度，透明度从低到高被等分为5个等级。
扫一扫
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
