Tailwind Typographic

最新推荐文章于 2026-05-12 12:18:47 发布
原创 最新推荐文章于 2026-05-12 12:18:47 发布 · 2.2k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

排版样式

字体集合（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-xsfont-size:0.75rem;
text-smfont-size:0.875rem;
text-basefont-size:1rem;
text-lgfont-size:1.125rem;
text-xlfont-size:1.25rem;
text-2xlfont-size:1.5rem;
text-3xlfont-size:1.875rem;
text-4xlfont-size:2.25rem;
text-5xlfont-size:3rem;
text-6xlfont-size:4rem;

典型的字号大小的单位转换

pxrempercentpointremark
6px0.375rem37.5%5pt6px / 16px = 0.375rem = 37.5%
7px0.438rem43.8%5pt7px / 16px = 0.438rem= 43.8%
8px0.500rem50%6pt8px / 16px = 0.500rem= 50.0%
9px0.563rem56.3%7pt9px / 16px = 0.563rem= 56.3%
10px0.625rem62.5%8pt10px / 16px = 0.625rem= 62.5%
11px0.688rem68.8%8pt11px / 16px = 0.688rem= 68.8%
12px0.750rem75.0%9pt12px / 16px = 0.750rem= 75.0%
13px0.813rem81.3%10pt13px / 16px = 0.813rem= 81.3%
14px0.875rem87.5%11pt14px / 16px = 0.875rem= 87.5%
15px0.938rem93.8%11pt15px / 16px = 0.938rem= 93.8%
16px1.000rem100.0%12pt16px / 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）

工具类属性
italicfont-style:italic;
not-italicfont-style:normal;

字体粗细（font-weight）

Tailwind使用.font-{weight}工具类设置CSS中font-weight属性以控制字体粗细

工具类属性
font-hairlinefont-weight:100;
font-thinfont-weight:200;
font-lightfont-weight:300;
font-normalfont-weight:400;
font-mediumfont-weight:500;
font-semiboldfont-weight:600;
font-boldfont-weight:700;
font-extraboldfont-weight:800;
font-blackfont-weight:900;

字间距（Letter Spacing）

CSS中使用letter-spacing属性以增减字符之间的空白间距，简单来说就是用来定位在文本字符框之间插入多少空白空间。这里的letter表示是字符，如果是英文则表示一个字母，如果是中文则表示一个汉字。letter-spacing允许设置负值。

letter-spacing属性值

letter-spacing: normal | <length>;
属性值描述
normal按当前字体正常间距确定，与0不同的是用户代理会根据它来确定文字的默认对齐方式。
<length>指定文字间距以替代默认间距，可以是负值。
工具类属性
tracking-tighterletter-spacing:-0.05em;
tracking-tightletter-spacing:-0.025em;
tracking-normalletter-spacing:0;
tracking-wideletter-spacing:0.025em;
tracking-widerletter-spacing:0.05em;
tracking-widestletter-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-noneline-height:1;
leading-tightline-height:1.25;
leading-snugline-height:1.375;
leading-normalline-height:1.5;
leading-relaxedline-height:1.625;
leading-looseline-height:2;
leading-3line-height:.75rem;
leading-4line-height:1rem;
leading-5line-height:1.25rem;
leading-6line-height:1.5rem;
leading-7line-height:1.75rem;
leading-8line-height:2rem;
leading-9line-height:2.25rem;
leading-10line-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-lefttext-align:left;
text-righttext-align:right;
text-centertext-align:center;
text-justifytext-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-transparentcolor:transparent;
text-blackcolor:#000;
text-whitecolor:#fff;
text-gray-100color:#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提供了常用的文本装饰工具类

工具类属性
underlinetext-decoration:underline;
line-throughtext-decoration:line-through;
no-underlinetext-decoration:none;

文本转换（text transform）

CSS提供的text-transform属性用于改变元素中的字母大小写

text-transform: none | capitalize | uppercase | lowercase | inherit;
属性值描述
none默认，标准文本
capitalize文本中每个英文单词首字母大写
uppercase文本中英文字母转换为大写
lowercase文本中英文字母转换为小写

Tailwind提供常用工具类用于text-transform

工具类属性
uppercasetext-transform:uppercase;
lowercasetext-transform:lower;
capitalizetext-transform:capitalize;
normal-casetext-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-basevertical-align:baseline;
align-bottomvertical-align:bottom;
align-text-bottomvertical-align:text-bottom;
align-middlevertical-align:middle;
align-topvertical-align:top;
align-text-topvertical-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-normalwhite-space:normal;
whitespace-no-wrapwhite-space:nowrap;
whitespace-prewhite-space:pre;
whitespace-pre-linewhite-space:pre-line;
whitesapce-pre-wrapwhite-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-normalword-break:normal; overflow-wrap;normal;
break-wordsoverflow-wrap:break-word;
break-allword-break:break-all;
truncateoverflow: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-nonelist-style-type:none;
list-disclist-style-type:disc;
list-decimallist-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-insidelist-style-position:inside;
list-outsidelist-style-position:outside;

占位符（placeholder）

Tailwind提供了.placeholder-前缀的工具类用于设置占位符的颜色和透明度

  • .placeholder-{color}-{size}用于设置占位符的颜色
  • .placeholder-opacity-{number}用于设置占位符文本的透明度，透明度从低到高被等分为5个等级。
JunChow520
关注
将TailwindCSS默认单位rem转换为px
前端菜菜DayDayUp的博客
05-15 2788
将TailwindCSS默认单位rem转换为px
Tailwind css 实践指南
Cipher_Y的博客
07-19 664
前端开发过程中写CSS通常是一件很头疼的事情，大家都不愿意去写，有的公司甚至专门招实习生过来替自己写CSS，为什么大家都讨厌或者说不愿意去写CSS呢？主要有一下几个原因tailwindcss为解决这些问题带来了福音我们首先来看个案例：这些CSS class不需要我们自己去写，这些都是tailwindcss给我们的，我们只需要在className里面写相应的类名就足够了，这就是原子化CSS带给我们的便利。
Anonymous Github快速入门：5分钟搭建匿名GitHub代理服务器
最新发布
gitblog_00721的博客
05-12 495
Anonymous Github是一款强大的开源代理服务器，专为支持匿名浏览GitHub上的开源科学代码和数据而设计。它能创建仓库或拉取请求的只读镜像，并移除所有身份标识痕迹，让你在提交论文或分享代码时保持匿名性，同时确保代码可访问。 [![Anonymous Github首页展示](https://raw.gitcode.com/gh_mirrors/an/anonymous_github/r
Tailwind 安装使用
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
11-12 1万+
Tailwind 安装使用
记录tailwindcss依赖和rem适配问题
weixin_53114994的博客
09-24 3421
安装tailwindcss导致某些svg导致不居中的问题，研究了很久才知道，tailwindcss的preflight的css文件默认改变了svg和img等诸多文件的默认配置，需要把配置preflight设置成false，不引用许多默认样式，比如svg会改成block，但是element的svg是inline-block导致不居中，我这边看到项目已经引入了postcss-px2rem-exclude这个插件，然后也引入了rem.js文件了。这个依赖，唉，前任的错误，把依赖删除就可以了。
移动端适配
wzstd的博客
10-22 983
移动端适配 视口viewport： <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <meta>标签中定义了一些元数据信息，通过设置<meta name = "viewport">，提供有关 视口初始大小 的信息，供移动设备 使用。属性值为
【转】关于 Serif Sans-Serif Mono…
kayneo的博客
06-09 1062
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ????? ???? ??? ? ? ? <img title= "【转】关于 Serif Sans-Serif M
使用tailwindcss轻松实现移动端rem适配
felix_alone2012的博客
08-10 2754
本示例节选自小卷全栈开发实战系列的《Vue3实战》，将演示如何用所支持的rem体系轻松实现一个仿b站移动端头部导航栏rem适配。
将tailwindCSS默认配置单位rem换成px
元元猿的博客
01-19 2347
【代码】将tailwindCSS默认配置单位rem换成px。
tailwindcss使用教程
weixin_52020362的博客
09-20 2220
Tailwind使用
在Vue中引入Tailwind并记录使用过程
weixin_49022197的博客
09-20 2678
tailwindcss
Tailwind教程1 - 开始使用
wzy1935的博客
05-27 5262
Tailwind教程1 - 开始使用 Tailwind是一款现代样式框架。本教程旨在循序渐进的教会大家从安装到完全使用tailwindcss搭建页面。我们开始吧！ Tailwind是什么？ tailwind是一个样式库。与UI库不同，它没有封装组件，而是封装css。例如下面的代码会将这个p标签文本设成红色： <p class="text-red-500">hello world!</p> 使用tailwind的时候，只需要给组件添加class即可。比如我们来写一个按钮： <b
学习 Bootstrap 5 之 Colors 和 Opacity
qq_37354060的博客
01-18 2834
学习 Bootstrap 5 之 颜色 和 不透明度
TailWind 使用指南
AnitaSun的博客
08-30 2818
TailWind 使用指南
Tailwind Spacing
JunChow
06-01 2007
单位（size） Tailwind间距单位采用rem，rem是相对于HTML的根元素<html>标签而言的，只需在根元素确定一个参考值，即可计算出不同rem的大小。 html{ font-size: 16px; } 例如：浏览器默认字号为16px，常见px于rem单位之间的转换。 px rem 4px 4/16=.25rem 8px 8/16=.5rem 12p...
TailwindCSS常用类大全
delete_you的博客
04-05 7351
简要介绍tailwindcss常用类，助力快速构建优雅的前端页面
tailwind使用教程以及tailwind不生效的问题
热门推荐
regretTAT的博客
09-26 1万+
theme: {// 用于覆盖tailwindcss的默认配置colors: {primary: {},},},},},spacing: {px: '1px',0: '0px',1: '4px',2: '8px',3: '12px',4: '16px',5: '20px',6: '24px',7: '28px',8: '32px',9: '36px',},none: '1',3: '12px',4: '16px',5: '20px',6: '24px',
CSS强制英文、中文换行与不换行 强制英文换行（转）
WANGBAOJUN194610的博客
06-15 302
word-break:break-all; 只对英文起作用，以字母作为换行依据 word-wrap:break-word; 只对英文起作用，以单词作为换行依据 white-space:pre-wrap; 只对中文起作用，强制换行 white-space:nowrap; 强制不换行，都起作用 white-space:nowrap; overflow:hidden; tex...
简洁高效的样式编写：揭秘Tailwind CSS
会思想的苇草i的博客
10-08 4625
Tailwind CSS是一种实用的CSS框架，通过提供一组原子类，使得构建用户界面更加高效。它不同于传统的CSS框架，可以让你直接在HTML中使用类来定义样式，而无需编写自定义的CSS。Tailwind CSS提倡快速开发和一致的UI设计，同时也支持自定义主题和扩展性。这使得它成为许多开发者喜爱的工具，特别是对于快速原型设计和快速迭代的项目。
vue3.2之 Tailwind CSS
weixin_43845137的博客
10-14 3159
vue3.2之 Tailwind CSS
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值