Day 3 - 试试 Tailwind CLI

记得一定要搭配上一篇环境配置的前半段！

使用 Tailwind CLI 安装

先建立一个资料夹(名称可自订)，并用 VS Code 开启。

mkdir tailwind_30day
cd tailwind_30day
code .

开启 VS Code 的终端机，Mac 快速键为 ^control + ~，在终端机输入下面指令来初始化，一路 Enter 按到底就好，会得到一只 package.json。

npm init

安装最新版 Tailwind，在终端机输入下列指令：

npm install -D tailwindcss@latest

原则上 Tailwind CLI 会自动增加必要的前缀字，不需特地安装 Postcss 和 Autoprefixer。当然想安装的话也可以。

建置自己的 CSS 档，这样未来如果有编写到 CSS 的部分，会比较好维护，档名可以取自己想取的名称。威尔猪这边习惯将资料放入「src」资料夹里，如 -> src / css / style.css，然後使用 @tailwind 这个指令来载入 Tailwind 的 base、components 和 utilities 样式：

/* src/css/style.css */

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

上面三行程序码可以自行取舍，如果不希望使用 base，就把 @tailwind "tailwindcss/base"; 这行删掉就可以了。

在 package.json 里，修改 scripts 的资料如下，加入「watch」属性(可以自定义名称)，记得 -i 为入口，要和刚刚自己创建的 CSS 路径一样， -o 为出口，档名一样可以自己定义，但通常使用「dist」作为输出後的资料夹。後面加入 --watch 是因为威尔猪很懒，不想每次修改就要执行一次，加入 --watch 或是 -w 可以启动监听程序，只要 purge 的档案有更新，会马上自动重新编译 CSS。

// package.json

...
"scripts": {
    "watch": "tailwindcss -i ./src/css/style.css -o ./dist/tailwind.css --watch"
  },
...

指令：tailwindcss　-i 「来源档案路径」 -o 「编译後存到哪个档案」。

预设支援 Autoprefixer，如果不想要 Autoprefixer 的功能，就在 tailwindcss 後面加上 --no-autoprefixer。

在「src」创建 index.html，因为设定输出为 dist / tailwind.css，所以要注意路径，连结「dist」资料夹这边的 CSS 才正确，并在 body 标签写入一个 Tailwind 内建的 Class 背景色(这边之後会提到)。

<!-- index.html -->

<link rel="stylesheet" href="../dist/tailwind.css">

<body class="bg-gray-900"></body>

在终端机输入 "watch" 指令看看 Tailwind 有没有引入成功。

npm run watch

点击 VS Code 右下角的 Go Live (如果没出现的话，重新开启一次 VS Code => Mac 快速键 ⌘command + ⇧shift + p => 输入 Reload Window)，当当～没意外的话大家应该看到背景已经变深灰色了吧！

But...休但几咧，怎麽编译出整包的 Tailwindcss，档案大小 4MB，我的妈妈咪啊～没搞错吧，说好的压缩咧？别急，咱们继续往下走。在终端机打指令 ^control + C ，跳出监听。

优化

创建 tailwind.config.js：

npx tailwindcss init

如果想要 Postcss 插件能随着 Tailwind 一起使用，可以在指令後面多一个 -p，会在专案根目录建立一个基本配置的 postcss.config.js，之後可自行增加需要的 Postcss 插件。

在 tailwind.config.js 新增配置，并启用即时模式。在会写入 Tailwind 的所有 html、js、vue、jsx 等档案加入 purge，在 Tailwind 输出时，将会删除没有使用的 CSS。

//tailwind.config.js

module.exports = {
    mode: 'jit',
    purge: [
        './src/**/*.html',
        './src/**/*.js',
        ...
    ],
    ...
}

启用即时模式 mode: 'jit'，这是 v2.1 以上版本才有的功能，它会大大缩短编译时所需要的时间，优点我们之後再谈。

未开启 JIT 模式前：

开启 JIT 模式後：

这编译时间简直神了，短的让威尔猪感动到想哭，这拯救了多少人虚无飘渺的空白岁月～

现在我们再重复第 7 项指令 npm run watch。哇呜～神奇的事发生了，档案变成只有 11KB (会依据所用的 CSS 多寡而不同)，跟原本简直天壤之别！

但这样就满足了吗？在最後上线前，威尔猪还需要做最後一次优化。在终端机打指令 ^control + C，跳出监听。

回到 package.json，加入「build」属性(可以自定义名称)，新增 scripts 的资料如下：

// package.json

...
"scripts": {
    "watch": ... ,
    "build": "NODE_ENV=production tailwindcss -i ./src/css/style.css -o ./dist/tailwind.css --minify"
  },
...