Tailwind CSS 排版背景边框学习（三）

TailwindCSS
, ,

前言

粗略的看了一下目录，发现这几章是知识点最多的一章，且这些都是 Tailwind CSS 官方制定的规范。

Typography 排版

Font Size 字体大小

用于控制元素字体大小的工具。

Class 类 Properties 属性
text-xs font-size: 0.75rem; /* 12px */
line-height: 1rem; /* 16px */
text-sm font-size: 0.875rem; /* 14px */
line-height: 1.25rem; /* 20px */
text-base font-size: 1rem; /* 16px */
line-height: 1.5rem; /* 24px */
text-lg font-size: 1.125rem; /* 18px */
line-height: 1.75rem; /* 28px */
text-xl font-size: 1.25rem; /* 20px */
line-height: 1.75rem; /* 28px */

常见的字体大小规格。

Font Weight 字体粗细

用于控制元素字体粗细的工具。

font-normal font-weight: 400;
font-bold font-weight: 700;

这两个是最常用的字体粗细类。

Line Clamp 行数限制

用于将文本限制为特定行数的工具。

Class 类 Properties 属性
line-clamp-1 overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;

看到 CSS 属性一股熟悉的味道，我经常会遇到文本超出盒子宽度的问题。所以我都会去 copy 网上别人的代码。以 line-clamp-* 开头，后面的数字代表行数。

List Style Image 列表样式图

用于控制列表项标记图像的工具。

Class 类 Properties 属性
list-image-none list-style-image: none; 

1
2
3
4
<ul class="list-image-[url(checkmark.png)] ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

这个就厉害了🐂， 传入指定图片自定义列表样式。这个就体现了 Tailwind CSS 的强大。如果我们想用原生 CSS 实现是不可能的。必须得用 JS 控制。而 Tailwind CSS 一行代码就搞定。

List Style Position 列表样式位置

控制列表中项目符号/数字位置的工具。

Class 类 Properties 属性
list-inside list-style-position: inside;
list-outside list-style-position: outside;

![](https://s2.loli.net/2024/08/25/Y9wpFo2hK7aZQyB.png

List Style Type 列表样式类型

用于控制列表的项目符号/编号样式的工具。

list-disc list-style-type: disc;
list-decimal list-style-type: decimal;

要创建项目符号或数字列表，请使用 list-disc 和 list-decimal 工具。

Text Align 文本对齐

控制文本对齐的工具。

常用 text-left、text-center、text-right 。

Text Color 文本颜色

用于控制元素文本颜色的工具。使用 text-* 工具类来控制元素的文本颜色。

Text Transform 文本转换

用于控制文本转换的实用程序。

capitalize text-transform: capitalize; 首字母大写

Text Overflow 文本溢出

用于控制元素文本溢出的实用程序。

text-ellipsis text-overflow: ellipsis;

Text Indent 文本缩进

用于控制文本在块中显示的空白量的工具。使用 indent-* 工具来设置块中文本前显示的空白（缩进）量。

Content 内容

控制前后伪元素内容的工具。

1
2
3
4
Higher resolution means more than just a better-quality image. With a Retina
6K display, <a class="text-blue-600 after:content-['_↗'] ..." href="<https://www>.
apple.com/pro-display-xdr/" target="_blank">Pro Display XDR</a> gives you
nearly 40 percent more screen real estate than a 5K display.

Backgrounds 背景

Background Attachment 背景附加

控制背景图片在滚动时行为的工具。

Class 类 Properties 属性
bg-fixed background-attachment: fixed; 使用 bg-fixed 将背景图像固定到视窗。
bg-local background-attachment: local; 使用 bg-local 让背景图像与容器和视口一起滚动。
bg-scroll background-attachment: scroll; 使用 bg-scroll 使背景图像随视口滚动，而不是随容器滚动。

Background Position 背景位置

控制元素背景图片位置的工具。使用诸如 bg-center、bg-right 和 bg-left-top 等工具来定位元素的背景图像。

Background Repeat 背景重复

用于控制元素背景图像重复的工具。

Background Size 背景大小

用于控制元素背景图像背景大小的工具。使用 bg-auto 以默认大小显示背景图像。

Borders 边框

Border Radius 边框半径

用于控制元素边框圆角的实用程序。使用像 rounded-sm、rounded 或 rounded-lg 这样的工具为元素应用不同的边框半径大小。

Border Width 边框宽度

控制元素边框宽度的工具。使用 border、border-0、border-2、border-4 或 border-8 工具类为元素的所有边设置边框宽度。使用 border-、border--0、border--2、border--4 或 border-*-8 工具类来设置元素一侧的边框宽度。