Tailwind CSS 布局学习（一）

前言

Tailwind CSS 是当前主流 CSS 框架之一。它提供了丰富的实用类和响应式设计，并支持 Flex 和 Grid 布局。其最突出的特点是让开发者无需编写 CSS 代码即可创建具备响应式设计的网站。它 Bootstrap很像，但它要做的事情比 Bootstrap 更具有野心。Bootstrap 做的仅仅只是一个 CSS 框架。 Tailwind css 做的是无需手动编写样式，就能完成任务。

尽管国内主流的 CSS 开发模式仍以 Vue 的预处理语言（如 Sass、Less）和 React 的 CSS in JS 方案（如 styled-components、Emotion）为主，这些技术的诞生都曾让我们兴奋不已。它们在当时是最流行的技术，解决了许多已知问题。以我使用过的 Sass 和 Less 为例，这些预处理语言扩展了 CSS，引入了变量、嵌套、混合、函数等功能，使样式代码更加简洁、易于维护和重用。

以 styled-components 为代表的 CSS in JS 技术让 CSS 更加灵活。我们甚至可以让后端传输一些经常需要微调的样式，比如背景阴影。这样，前端无需修改已经写好的代码，后端只需执行一条 SQL 语句就可以轻松改变样式。这种设计方式的好处是，当出现细微的样式不符时，设计师不会来找前端的麻烦——他们会直接找后端，让后端稍作调整就行了。要是不这样，前端可能会说：”我刚才刚改了一下源码，你重新传到服务器去。”一次、两次无所谓，多了估计后端老哥就要像《王者荣耀》中的典韦一样拿着键盘追着人砍了。

然而，随着时间推移，这些技术也暴露出一些问题。可复用性成为一大挑战：由于工程师水平参差不齐，只有技术精湛的人才能编写出真正可复用的代码。类名命名也是一个棘手的问题：在大型项目中，仅仅是为样式命名就让人头痛不已，可用的词汇很快就会耗尽。此外，不同工程师在书写 CSS 样式时往往顺序不一，有些甚至不遵守既定规范。这导致后期维护异常困难，仅仅是要调整某些样式就需要耗费大量时间和精力。除此之外可以看看官方做的比较 https://tailwindcss.com/docs/utility-first 原生的 CSS 和 用 Tailwind CSS 的区别。世界上最大的流媒体影视平台Netflix 在 Netflix Top 10 中使用 Tailwind，整个网站通过网络仅传输 6.5kB 的 CSS。

而使用 Tailwind CSS 就完全不需要考虑这些问题，我们不用为可复用性着想、不用为命名而烦躁、不用为规范而起冲突。我们要做的就是遵守规范。

为什么要写这篇文章

国内关于 Tailwind CSS 的视频教程几乎没有，即便有，也仅仅是十几分钟的简介。这短短几分钟显然无法让人深入掌握 Tailwind CSS。中文教程文档的翻译也不够完善，只翻译了少数几个页面。此外，Tailwind CSS 正处于快速发展期，更新迭代速度很快。英文文档为了跟上这种节奏，也在不断更新。中文文档显然难以跟上这种速度。思考再三，我决定既然要学，为什么不直接学习最新的内容呢？因此，本文将参照官方英文文档来撰写。

当然，由于我的英文水平有限，无法直接阅读英文文档。这时，一款名为”沉浸式翻译”的插件就派上了用场。再配合 ChatGPT 的翻译功能，效果简直出乎意料地好！恰巧 Notion 官方推出了中文版，用它来撰写笔记真是舒适至极。

本文不设计任何的框架配置相关配置的东西，只写最纯粹的布局、间距、排版相关的 Tailwind 知识。

布局

纵横比

Tailwind 提供了几个类名来控制元素的纵横比。这些类名允许你通过设置 CSS 的 aspect-ratio 属性来控制元素的宽高比。例如：

• aspect-square：设置元素的纵横比为 1:1。
• aspect-video：设置元素的纵横比为 16:9，通常用于视频。

如我们想在网页插入一个视频，想让它以 16:9 的纵横比显示只需要：

<div class="aspect-video w-full">
	<iframe
		src="<https://player.bilibili.com/player.html?isOutside=true&aid=1804175127&bvid=BV1yb42187jZ&cid=1532009270&p=1>"
	></iframe>
</div>

Container 容器

container 在开发中很常见，它是整个页面的版心容器。具体有哪些属性参考官方文档 https://tailwindcss.com/docs/container

如我们想定义一个 1280px **宽的版心容器。

<div class="xl:container"></div>

Columns 列

用于控制元素内列数的工具。以 columns- 开头，后面可以填指定列的数量。更多用法可以看官网文档。

Box Decoration Break 盒子装饰断裂

Class 类	Properties 属性	解释
box-decoration-clone	box-decoration-break: clone;	当元素被拆分成多个框时，每个框都将拥有独立的装饰效果。换句话说，背景、边框等会在每个拆分的部分上被复制，使得每一部分看起来像是独立的完整元素。
box-decoration-slice	box-decoration-break: slice;	当元素被拆分成多个框时，装饰效果不会被复制，而是作为一个整体保持一致。背景、边框等装饰将被切割，显示为一个连续的整体，而不是在每个拆分的部分上重复。

具体效果如下

!https://s2.loli.net/2024/08/22/zOYfyKJwe8ahb7G.png

总结：clone 属性在文本被分割时，让文本看起来更像一个整体。而 slice 则彻底切断文本，使其不再呈现为一段连贯的内容。

Box Sizing 盒子模型尺寸

用于控制浏览器如何计算元素的总大小的工具。

Class 类	Properties 属性	解释
box-border	box-sizing: border-box;	元素的总宽度和高度包括内容的宽度、高度，以及内边距和边框。也就是说，设置了一个固定的宽度后，内边距和边框会从这个宽度中减去。（很常用）
box-content	box-sizing: content-box;	元素的宽度和高度只包括内容的尺寸。内边距和边框会在内容尺寸之外添加，因此它们会增加元素的总尺寸。（不常用）

Display 显示

block	display: block;
flex	display: flex;
hidden	display: none;

常用的 display flex 属性就这些。https://tailwindcss.com/docs/display[splay](https://tailwindcss.com/docs/display)

Floats 浮动

用于控制内容围绕元素的包装的工具。浮动在目前主流的开发模式 Flex+box 中已经落下帷幕了。它的唯一作用可能就是文章环绕自周围了。

Class 类	Properties 属性
float-start	float: inline-start;
float-end	float: inline-end;
float-right	float: right;
float-left	float: left;
float-none	float: none;

值得一提的是，在 Tailwind CSS 中设置 float-none 就能清除浮动了，这真的是太厉害了。原生的 CSS 光是解决浮动的问题就有几种。代码量也十分的多。

Clear 清除浮动

用于控制内容围绕元素的包装的工具。它也是用来清除浮动，只不过它能更精准的清除像要清除哪个部位的浮动。

Class 类	Properties 属性
clear-start	clear: inline-start;
clear-end	clear: inline-end;
clear-left	clear: left;
clear-right	clear: right;
clear-both	clear: both;
clear-none	clear: none;

Object Fit 对象适应

用于控制替换元素内容如何调整大小的工具。常用在图片身上，官方文档有很详细的介绍每个属性的用法。

Class 类	Properties 属性	解释
object-contain	object-fit: contain;	内容将被缩放以保持其宽高比，同时完全适应容器的尺寸。即使容器的尺寸与内容的比例不同，内容的完整性也会得到保留，但可能会出现未填充的空白区域。
object-cover	object-fit: cover;	内容将被缩放以保持其宽高比，同时完全填充容器的尺寸。内容可能会超出容器并被裁剪，但不会出现未填充的空白区域。
object-fill	object-fit: fill;	内容将被拉伸以完全填充容器，不保留原始的宽高比。这可能导致内容变形。
object-none	object-fit: none;	内容不会缩放，将以其原始大小显示。如果内容大于容器，则内容可能会溢出；如果内容小于容器，则会有空白区域。
object-scale-down	object-fit: scale-down;	内容不会缩放，将以其原始大小显示。如果内容大于容器，则内容可能会溢出；如果内容小于容器，则会有空白区域。

Object Position 对象位置

用于控制替换元素的内容在其容器内应如何定位的工具。position 和object-position 用于控制替换元素（如 <img>、<video>、<iframe>）在其容器内的对齐方式。这是在使用 object-fit 属性调整内容大小和裁剪时，帮助确定内容如何相对于其容器进行定位。

Class 类	Properties 属性
object-bottom	object-position: bottom;
object-center	object-position: center;
object-left	object-position: left;
object-left-bottom	object-position: left bottom;
object-left-top	object-position: left top;
object-right	object-position: right;
object-right-bottom	object-position: right bottom;
object-right-top	object-position: right top;
object-top	object-position: top;

Overflow 溢出

用于控制元素如何处理超出容器大小的内容的工具。它最常用的是 overflow-hidden ，其它看看就行，实际很少用。

overflow-auto	overflow: auto;
overflow-hidden	overflow: hidden;
overflow-clip	overflow: clip;
overflow-visible	overflow: visible;
overflow-scroll	overflow: scroll;
overflow-x-auto	overflow-x: auto;
overflow-y-auto	overflow-y: auto;
overflow-x-hidden	overflow-x: hidden;
overflow-y-hidden	overflow-y: hidden;
overflow-x-clip	overflow-x: clip;
overflow-y-clip	overflow-y: clip;
overflow-x-visible	overflow-x: visible;
overflow-y-visible	overflow-y: visible;
overflow-x-scroll	overflow-x: scroll;
overflow-y-scroll	overflow-y: scroll;

Position 位置

它和原生的 CSS 定位没有什么区别。

Class 类	Properties 属性
static	position: static;
fixed	position: fixed;
absolute	position: absolute;
relative	position: relative;
sticky	position: sticky;

Top / Right / Bottom / Left顶部 / 右侧 / 底部 / 左侧

用于控制定位元素放置的工具。属性太多了，还有我不认识从来没有用过的属性，我得学习去了。

Visibility 可见性

Class 类	Properties 属性	解释
visible	visibility: visible;	使元素可见
invisible	visibility: hidden;	使元素不可见
collapse	visibility: collapse;	使元素不可见，类似 display: none，它用于隐藏表格某一列等。

Z-Index

用于控制元素堆叠顺序的工具。z-x , x代表着数字。

总结

以上就是布局的主要内容了。不过，如果你认为这就是全部，那可就想错了！还有许多属性等着你去探索。我只是选择性地介绍了一些我认为比较有用的属性，官方文档对其他属性的描述也不是很详细。

那么，为什么我要学习 Tailwind CSS 呢？主要是因为我想上手一个叫 Next.js 的 React 框架，它的默认配置中推荐使用 Tailwind CSS 来编写样式。我相信在国内在不久的将来，Tailwind CSS 很可能成为主流的样式编写方案。国外目前主流编写 CSS 方案就是 Tailwind CSS。