Day11 TailwindCSS 介绍，在 Next.js 专案安装 TailwindCSS

上一篇我们成功安装完 GraphQL client，并在首页显示出文章列表了。功能做完，接下来要来切版美化样式了！

在这边我想使用 TailwindCSS 这套 CSS 框架来进行切版！

TailwindCSS，兼具开发速度与弹性的 CSS 框架

这边来简介一下 TailwindCSS。

他是一套最近新出来且非常热门的 CSS 框架，主打重点如下：

1. 切版速度非常快，所有切版动作都是在 HTML 里写 class，不需要额外 css 档案，来回比对样式
2. 内建一套经过设计且可扩充的设计系统 (Design System)，涵盖间距、字体大小、颜色等，帮助你遵照规范来切版，比较不会切出视觉不一致的画面
3. 客制化弹性极大，几乎所有 css 能实现的样式都能舒服的用 TailwindCSS 方式做到，不会遇到使用其他 CSS 框架时，若需求与内建元件差距过大的话，需要很别扭的去魔改的问题

TailwindCSS 概念与原理

TailwindCSS 使用起来类似 Bootstrap 等 CSS 框架，都是先预先定义了一大组 class 让我们切版时使用，但决大部分框架的 class 粒度都很大，像是 Bootstrap 写一个 button class，就会套用一大坨样式出现一个还不错的按钮，但今天你要客制化样式时，就要先用 devtool 看这个 class 究竟有哪些样式，进而决定要 overwrite 哪些样式，来符合你的需求，改起来不顺手。

TailwindCSS 的 class 粒度就非常细，细到每一条常用的 css 样式都有一组 class 组，像是 font-size 的话就有 text-xs、text-sm、text-base 等等，一路到 text-9xl 共 13 个 class。

每一个 class 对应到的样式也非常单纯，像是 text-base 就只有两行 style：

font-size: 1rem;
line-height: 1.5rem;

text-lg 也只有两行，数字换掉而已：

font-size: 1.125rem;
line-height: 1.75rem;

Utility-first CSS Framework

TailwindCSS 官方称这为 Utility-first CSS Framework，每个 class 只做一件事，透过组合多个 class 来完成你的布局，客制化弹性极大。

class 命名也非常直观，所以看到一个 html 的一整组 class 就能很快理解他究竟吃到哪些样式。

并且 media-query、psuedo-element 等 CSS 用法也都有对应 class 能用，透过加前缀字的方式实现，像是 hover:text-red-200 指定 hover 时文字颜色要变淡红色，lg:text-2xl 指定萤幕宽度大於 1024px 时，font-size 要是 1.5rem。

TailwindCSS 缺点

当然 Tailwind 也是有缺点的，如果你的网站只是个自己用的後台系统，或是 demo 用的专案，不需要好看的客制化样式的话，用上 Tailwind 就有点多余了，此时用 Bootstrap 之类的反而比较适合快速拉出还能看的元件。

并且 Tailwind 对 CSS 基础知识要求比较高，你要先知道你要的效果需要用到哪些 CSS，你才可能找到对应的 Tailwind class 来用。并没有开箱及用的 button 或 alert 元件可以直接使用。

这个问题官方有 TailwindUI 模板库可以用，提供很多组好的常见 UI pattern 可以直接复制带走，也有社群版的 Tailwind Components 等等。

在 Next.js 安装 TailwindCSS

安装方式可以参考 TailwindCSS 官方针对 Next.js 的教学文件，或是 Next.js 官方的 with-tailwindcss example。

安装过程如下：

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

并在专案根目录新增 tailwind.config.js 档案，这档案可用来设定 tailwindcss 行为，以及扩展设计系统 theme：

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,ts,jsx,tsx}'],
  // or
  // purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {},
  variants: {
    extend: {},
  },
  plugins: [],
}

这边需要注意 purge 参数，这是用来指出你会出现 tailwindcss class name 的档案有哪些，在 build 到正式环境时，tailwind 会依此来判断哪些 class 没被用到，并从最後的 css 档案删除，减少 bundle size。

因为我把所有 component、page 等页面逻辑都放在 /src 底下，因此我写成那样，如果你不是的话，需要依照你的档案架构修改。

再来要新增 /postcss.config.js，用来启用 postcss：

// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

最後在全站的 _app.js 会 import 的 globals.css 或 index.css 的最开头加入以下程序码：

tailwind base;

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Write you own custom component styles here */

/* Start purging... */
@tailwind utilities;
/* Stop purging. */

/* Your own custom utilities */

/* ... Other existing css styles */

最後重新 yarn dev 开启专案，你会发现很多浏览器预设样式消失了，像是 h2、h3 变小成跟 p 一样，间距都消失了，这样就算完成了！

不用担心，我们下一篇会再把样式加回来，会这样是因为 Tailwind 跟 Bootstrap 等框架一样，都会先 Normalize 浏览器预设样式，把所有样式的控制权交还给你定义，防止同一个网站在不同装置看样式会不同。

以上的程序码改动可以在这支 commit 看到。

下一篇

这一篇我们成功在 Next.js 专案安装了 TailwindCSS，下一篇我们会实际用它来切版首页样式！