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

1. 前言

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

• 听说你还不会 Tailwind CSS(基础·上篇)
• 听说你还不会 Tailwind CSS(基础·中篇)
• 听说你还不会 Tailwind CSS(基础·下篇)

现在来更新进阶部分：

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

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

2. 什么是可以复用的？

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

2.1 .container

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

```html

### 2.2 `.btn` 按钮样式也容易复用，假设有一个普通按钮如下： ```html button ```

通常样式被封装在 `.btn` 中： ```css .btn { min-width: 80px; color: white; background-color: black; } ``` ### 2.3 `.center` 又或者是水平垂直居中，这在开发中就更常见了： ```html

```

`.center` 类的声明如下： ```css .center { display: flex; justify-content: center; align-items: center; } ``` 那么这些复用的类在 Tailwind CSS 中应该如何处理呢？ ## 3. 自定义指令 Tailwind CSS 使用了一种专属的 at 规则([at-rules](https://developer.mozilla.org/zh-CN/docs/Web/CSS/At-rule))的 CSS 语句用来定义 CSS 如何运行。 ### 3.1 `@tailwind` 在配置 Tailwind CSS 时，有一步非常重要的步骤就是在全局样式(例如：globals.css)中添加： ```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 中添加以下代码： ```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** ```html button ``` 等价于： ```html button ``` * **.center** ```html

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

### 4.2 `screen()` 以往写媒体查询比较麻烦，需要定义各种条件而且容易搞混： ```css @media screen and (min-width: 640px) { /* ... */ } ``` 现在可以用 `screen()` 函数快速创建媒体查询，减少很多心智负担： ```css @media screen(sm) { /* ... */ } ``` 媒体查询相关内容将在《响应式篇》深入，感兴趣的话可以先关注\~ ## 5. 自定义样式 有时候 Tailwind CSS 预定义的样式没有我们想要使用的默认值，只能自己写。 ### 5.1 任意值 第一种方式是使用任意值，这在基础篇已经用过很多次了，就是通过 `name-[]` 的方式。 中括号中放入任意值，可以是**长度单位**： ```html

颜色值： ```html

cool color

``` 文本内容： ```html

star!

``` 甚至是 `theme()` 函数： ```html

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.

```

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

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

```tsx

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!

```

5.2 @layer + theme()

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

例如有一个 card 样式：

```html

my card

```

使用 @layer + @apply：

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

使用 @layer + theme()：

css @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 等等。

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

```html

my card

```

6. 总结

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

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

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

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