Tailwind Typographic

排版样式

字体集合（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的下端沿线。

line-height

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	将元素的顶端与行中最高元素的顶端对齐

vertical-align

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个等级。

查看全文

http://www.taodudu.cc/news/show-4582786.html

Tailwind 初识
Tailwind教程1 - 开始使用
Tailwind 真香
vue3.2之 Tailwind CSS
Tailwind教程2 - 基础样式
学习Vue3 第三十四章（Vue3集成Tailwind CSS）
船说CMS模板 - 笔趣阁自适应模板
Python爬虫爬取笔趣阁小说
爬虫实战|从笔趣阁爬取书籍并简单保存
1.4 爬虫-笔趣阁获取小说例子
Python爬虫--笔趣阁小说爬取
xpath爬取笔趣阁小说
初学爬虫-笔趣阁爬虫
1.python爬取笔趣阁小说
python3爬取笔趣阁小说
java爬虫爬取笔趣阁小说
python爬取小说爬取_用python爬取笔趣阁小说
用python爬取笔趣阁小说并分章节保存到本地
python下载笔趣阁小说生成txt文档
爬虫练习-爬取笔趣阁小说
python3+正则(re)增量爬虫爬取笔趣阁小说( 斗罗大陆IV终极斗罗)
学计算机和电子信息工程那个更好找工作,电子信息工程专业毕业月薪一般是多少好不好找工作...
同感，在另外一个小华为待过，也差不多是这样的
硬件开发规范化管理_华为硬件工程师手册_笔记1
华为各类工程师通信基础面试题库以及答案
应聘华为各类工程师通信基础题库以及答案
华为通信基础面试题库以及答案
AMEYA360皇华：电子元器件四大分类
华为智能汽车产业研究与投资机会分析
关于layui、table数据表格请求异常回调函数