type
status
date
slug
summary
tags
category
icon
password
1. 前言
这个系列的基础篇已经完结。
现在来更新进阶部分：
- 上篇：如何复用样式
- 下篇：Tailwind 的配置项
这是上篇，主要解决样式复用问题。
2. 什么是可以复用的？
在开始之前，首先要明确一个问题：什么可以复用？
2.1 .container
在网页开发中，
.container 是一个出现频率极高的容器类，它用来做什么呢？给网页框定一个容器范围，例如：网页的展示区域宽度范围为 1280px - 1920px：当浏览器窗口宽度小于 1280px 时会出现横向滚动条以确保能够显示 1280px 宽度的页面内容，当浏览器窗口大于 1920px 时，最多显示 1920px 的页面宽度。
又或者只是把内容展示在 1280px 的范围中：
在以往的开发中，控制宽度的样式声明会放在一起，然后封装在
.container 这个 CSS 类中，以后者为例，CSS 会是这样：
2.2 .btn
按钮样式也容易复用，假设有一个普通按钮如下：
通常样式被封装在
.btn 中：2.3 .center
又或者是水平垂直居中，这在开发中就更常见了：
.center 类的声明如下：那么这些复用的类在 Tailwind CSS 中应该如何处理呢？
3. 自定义指令
Tailwind CSS 使用了一种专属的 at 规则（at-rules）的 CSS 语句用来定义 CSS 如何运行。
3.1 @tailwind
在配置 Tailwind CSS 时，有一步非常重要的步骤就是在全局样式（例如：globals.css）中添加：
@tailwind 指令用于将 Tailwind 中的 base、components、utilities 三个层级的样式插入到全局样式中。- base：这是最基础的层级，在这个层级上，Tailwind 提供了一些界定基础样式的规则。例如margin、padding、color、font-size等等。
- components：在这个层级可以创建可复用的样式块，例如：按钮、卡片等。默认情况下是空的。
- utilities：作为工具层级，包括了 Tailwind 的大部分功能，例如： layout、flex、grid、spacing（margin 和 padding）、colors、typography、borders 等等。
3.2 @layer + @apply
@layer 这个指令告诉 Tailwind 想要把对应的样式放在上述哪一个层级（base、components、utilities）。在实际使用中需要配合 @apply，它将允许我们使用现有的 Tailwind CSS 类。
上一节提到的
.btn 属于 components（组件级别的复用样式），而 .container、.center 属于 utilities（更为底层的样式应用），在 globals.css 中添加以下代码：设置完成后，就可以直接使用了。
- .container
等价于：
- .btn
等价于：
- .center
等价于：
4. 自定义函数
Tailwind CSS 提供了两个实用的自定义函数——theme() 和 screen()，它们的作用是在我们自己的 CSS 样式中使用 Tailwind CSS 中的特定值。
4.1 theme()
使用
theme() 函数获取 Tailwind 样式变量，下面是一个在 React 中的使用示例：然后引入到组件中：
spacing 是一个空间刻度系统，在基础篇中使用的数值就是基于这套系统。上述的 spacing.12 表示的是数值为 12 时的空间距离：
也就是 3rem，等价于 48px。因此最后的效果如下：
4.2 screen()
以往写媒体查询比较麻烦，需要定义各种条件而且容易搞混：
现在可以用
screen() 函数快速创建媒体查询，减少很多心智负担：媒体查询相关内容将在《响应式篇》深入，感兴趣的话可以先关注~
5. 自定义样式
有时候 Tailwind CSS 预定义的样式没有我们想要使用的默认值，只能自己写。
5.1 任意值
第一种方式是使用任意值，这在基础篇已经用过很多次了，就是通过
name-[] 的方式。中括号中放入任意值，可以是长度单位：
颜色值：
文本内容：
甚至是
theme() 函数：或者是使用
var() 定义的变量：
5.2 @layer + theme()
在自定义指令
@layer 中已经掌握了如何创建自己的自定义组件、工具样式。再结合 theme()，可以更加方便地编写自己的样式代码。例如有一个 card 样式：
使用
@layer + @apply：使用
@layer + theme()：后者的写法和写原生就很像了，只需要掌握 Tailwind 的内置系统规则即可。之前提到 spacing 是一个刻度系统，同样还有颜色 colors、边框弧度 borderRadius 等等。
最后只需要愉快地写下这样一行代码就能搞定卡片样式：
6. 总结
以上就是如何实现样式复用的全部内容，总的来说就是两个方案：
@layer+@apply
@layer+theme()
不过仍然有一些需要注意的地方，我们最好不要滥用这些方法，虽然可以方便书写，但是过多的封装会造成打包体积的增大，可以直接写 Tailwind 的地方就用预设值直接写，除非是在文中提到的那种十分常见的样式才有必要封装起来。
下一篇将介绍 Tailwind CSS 的配置项，从而解决最后一波问题，例如：我想扩展更多的颜色变量、或者是字体大小？或者是重新定义默认值。
- 作者:Eric 见嘉
- 链接:https://tangly1024.com/article/dont-know-tailwindcss-4
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章