听说你还不会 Tailwind CSS（进阶·上篇）

1. 前言

这个系列的基础篇已经完结。

现在来更新进阶部分：

• 上篇：如何复用样式
• 下篇：Tailwind 的配置项

这是上篇，主要解决样式复用问题。

2. 什么是可以复用的？

在开始之前，首先要明确一个问题：什么可以复用？

2.1 .container

在网页开发中，.container 是一个出现频率极高的容器类，它用来做什么呢？给网页框定一个容器范围，例如：网页的展示区域宽度范围为 1280px - 1920px：

<div class="h-screen bg-sky-200 min-w-[1280px] max-w-[1920px] mx-auto"></div>

当浏览器窗口宽度小于 1280px 时会出现横向滚动条以确保能够显示 1280px 宽度的页面内容，当浏览器窗口大于 1920px 时，最多显示 1920px 的页面宽度。

又或者只是把内容展示在 1280px 的范围中：

<div class="h-screen bg-sky-200 w-[1280px] mx-auto"></div>

在以往的开发中，控制宽度的样式声明会放在一起，然后封装在 .container 这个 CSS 类中，以后者为例，CSS 会是这样：

.container {
  width: 1280px;
  margin: 0 auto;
}

2.2 .btn

按钮样式也容易复用，假设有一个普通按钮如下：

<button class="bg-black text-white min-w-[80px]">button</button>

通常样式被封装在 .btn 中：

.btn {
  min-width: 80px;
  color: white;
  background-color: black;
}

2.3 .center

又或者是水平垂直居中，这在开发中就更常见了：

<div
  class="w-[1280px] mx-auto my-2 h-48 border-2 flex justify-center items-center"
>
  <div class="bg-sky-500 size-20"></div>
</div>

.center 类的声明如下：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

那么这些复用的类在 Tailwind CSS 中应该如何处理呢？

3. 自定义指令

Tailwind CSS 使用了一种专属的 at 规则（at-rules）的 CSS 语句用来定义 CSS 如何运行。

3.1 @tailwind

在配置 Tailwind CSS 时，有一步非常重要的步骤就是在全局样式（例如：globals.css）中添加：

@tailwind base;
@tailwind components;
@tailwind utilities;

@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 中添加以下代码：

@layer components {
  .btn {
    @apply bg-black text-white min-w-[80px];
  }
}

@layer utilities {
  .container {
    @apply w-[1280px] mx-auto;
  }
  .center {
    @apply flex items-center justify-center;
  }
}

设置完成后，就可以直接使用了。

• .container

<div class="h-screen bg-sky-200 w-[1280px] mx-auto"></div>

等价于：

<div class="h-screen bg-sky-200 container"></div>

• .btn

<button class="bg-black text-white min-w-[80px]">button</button>

等价于：

<button class="btn">button</button>

• .center

<div
  class="w-[1280px] mx-auto my-2 h-48 border-2 flex justify-center items-center"
>
  <div class="bg-sky-500 size-20"></div>
</div>

等价于：

<div class="w-[1280px] mx-auto my-2 h-48 border-2 center">
  <div class="bg-sky-500 size-20"></div>
</div>

4. 自定义函数

Tailwind CSS 提供了两个实用的自定义函数——theme() 和 screen()，它们的作用是在我们自己的 CSS 样式中使用 Tailwind CSS 中的特定值。

4.1 theme()

使用 theme() 函数获取 Tailwind 样式变量，下面是一个在 React 中的使用示例：

/* my-style.module.css */
.content-area {
  height: calc(100vh - theme(spacing.12));
}

然后引入到组件中：

import styles from './my-style.module.css';

export default function Page() {
  return (
    <div className={`container my-2 border-2 center ${styles['content-area']}`}>
      <div className="bg-sky-500 size-20"></div>
    </div>
  );
}

spacing 是一个空间刻度系统，在基础篇中使用的数值就是基于这套系统。上述的 spacing.12 表示的是数值为 12 时的空间距离：

也就是 3rem，等价于 48px。因此最后的效果如下：

4.2 screen()

以往写媒体查询比较麻烦，需要定义各种条件而且容易搞混：

@media screen and (min-width: 640px) {
  /* ... */
}

现在可以用 screen() 函数快速创建媒体查询，减少很多心智负担：

@media screen(sm) {
  /* ... */
}

媒体查询相关内容将在《响应式篇》深入，感兴趣的话可以先关注~

5. 自定义样式

有时候 Tailwind CSS 预定义的样式没有我们想要使用的默认值，只能自己写。

5.1 任意值

第一种方式是使用任意值，这在基础篇已经用过很多次了，就是通过 name-[] 的方式。

中括号中放入任意值，可以是长度单位：

<div class="w-[200px] h-[200px] bg-sky-500"></div>
<div class="w-[15em] h-[20rem] bg-red-500"></div>

颜色值：

<p class="text-[#0c0c0c]">cool color</p>

文本内容：

<p class='before:content-["✨"]'>star!</p>

甚至是 theme() 函数：

<p class="w-[theme(spacing.96)]">
  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate doloribus
  aliquam tempore ducimus iure at cupiditate harum dicta voluptas voluptatum,
  quidem quasi sunt. Quo quia molestias iure quod ducimus culpa.
</p>

或者是使用 var() 定义的变量：

/* global.css */
:root {
  --my-color: #ff4200;
}

<p class="text-[--my-color]">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
  repellendus, animi, pariatur expedita omnis nihil assumenda cum ratione ipsam,
  eveniet sit tempora placeat voluptatum voluptas ea odio quisquam nisi!
  Repellendus!
</p>

5.2 @layer + theme()

在自定义指令 @layer 中已经掌握了如何创建自己的自定义组件、工具样式。再结合 theme()，可以更加方便地编写自己的样式代码。

例如有一个 card 样式：

<div class="size-48 p-5 rounded-md bg-sky-300">my card</div>

使用 @layer + @apply：

@layer components {
  .card {
    @apply size-48 rounded-md bg-sky-300;
  }
}

使用 @layer + theme()：

@layer components {
  .card {
    width: theme(spacing.48);
    height: theme(spacing.48);
    padding: theme(spacing.5);
    border-radius: theme('borderRadius.md');
    background-color: theme('colors.sky.300');
  }
}

后者的写法和写原生就很像了，只需要掌握 Tailwind 的内置系统规则即可。之前提到 spacing 是一个刻度系统，同样还有颜色 colors、边框弧度 borderRadius 等等。

最后只需要愉快地写下这样一行代码就能搞定卡片样式：

<div class="card">my card</div>

6. 总结

以上就是如何实现样式复用的全部内容，总的来说就是两个方案：

• @layer + @apply
• @layer + theme()

不过仍然有一些需要注意的地方，我们最好不要滥用这些方法，虽然可以方便书写，但是过多的封装会造成打包体积的增大，可以直接写 Tailwind 的地方就用预设值直接写，除非是在文中提到的那种十分常见的样式才有必要封装起来。

下一篇将介绍 Tailwind CSS 的配置项，从而解决最后一波问题，例如：我想扩展更多的颜色变量、或者是字体大小？或者是重新定义默认值。