Day 12：「我可不可以 CDN 就好？」- Tailwind 安装及设定

Day12-Banner-not-yet

前面的功能介绍和小练习都度过了，
我们现在要来学习如何安装和设定罗！！！

不过说到安装啊，有些人可能会想：

「兔兔！如果我只是想要做简单的应用和练习呢？还要安装不是太麻烦了吗？」

的确，有引入 CDN 这个方法可以选。你可以在页面中的 <head> 区段中加上这个 css 档的连结：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

这样你就可以开始使用 Tailwind CSS 罗！

但是，如果这麽轻松就可以获得那麽强大的优势
今天就不会有这一篇存在了！因为有些事情不得不告诉你。

如果单靠 CDN 的方式，会导致很多强大的功能没有全开，
我们这边就简单举几个例子：

基本的，就是无法新增自订颜色跟支援深色模式。
再进阶一点，就是无法使用 @apply 指令将语法整理起来。
最严重的，就是无法压缩档案，CDN 版大小约 2.79MB。 (完整版约 3.7MB~4MB)

所以如果你只是为了玩玩、体验 tailwind 的特性及带来的方便性，你的确可以使用 CDN 的方式就好，可是如果你今天想要变成成品上线、或是当公司产品的话，这个没压缩的大小很有可能让你被火 (fire) 了 XD

因为、真的、载入、要、好久！

不过现今 Tailwind 推出了 JIT 模式之後，CDN 的 Tailwind 已经开始不支援某些强大的功能了，所以如果你只是要练习使用 Tailwind 或发问切板问题，我绝对推荐你使用官方的 Playground。

(相信这些天用下来也习惯了吧！)

还有我想说的是，其实 Tailwind 也能用本身提供的功能或 CLI 来把一些设定产生成 .css 档，其实对你来说用起来和 CDN 没两样，甚至还支援客制化和所有新功能，所以 ...

既然了解了优缺点，我要在这边再推荐一次：

安装吧！别挣扎了 XD

建立专案

其实使用在前端框架的专案上是最好的，不过我们这边就先还不要那麽进阶，建立一个空专案放个 index.html 就好了。

开一个要当专案的资料夹，然後执行这个指令：

npm init

接着依序调整或确定你 package.json 的设定。
产生完 package.json 就可以了。

然後记得要在专案中建立一个 index.html，
如果不知道要放什麽内容，也可以直接用这个：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

然後专案底下目前是这样：

接下来就开始来安装罗！

安装 Tailwind CSS

因为 Tailwind 是使用 PostCSS 做为预处理器来进行编译，所以我们必须安装 Tailwind 和 PostCSS 还有 Autoprefixer。

然後在操作这步之前，切记！
请先检查你的 npm 版本是否大於 12.13.0！

没问题的话，使用这个指令：

npm i -D tailwindcss@^2.2.19 postcss autoprefixer

*************************************
注意！
这篇撰写时 v3 还没推出，现行若以 tailwindcss 来安装的话，装的会是 v3.0 版，这样的话一些设定上以及流程都会有与文章内容有差异，所以请使用 tailwindcss@^2.2.19
*************************************

安装完之後，会多出 package-lock.json 档案和 node_modules 资料夹，像这样：

没问题的话接着继续罗！这样就安装好了，再来就是设定。

设定 Tailwind

产生配置档

为了提供可以让你轻松自定义的方法，需要产生一个 Tailwind 的配置档。使用这个指令来产生预设的配置档：

 npx tailwindcss init -p

指令执行後，专案根目录中应该会多出 tailwind.config.js 以及 postcss.config.js 两个配置档，如果两个都在就没错。

那关於 tailwind.config.js 这个配置档，无论是之後要增加新样式、增添新功能，又或者是开启 JIT 模式及设定生产环境优化等等，都必须写在这个配置档之中。

来小小解释一下，指令中所使用的参数 -p 的作用就是在产生 tailwind.config.js 的同时产生 postcss.config.js。而这个配置档就是 postcss 插件的设定，如果你想要增加或调整 postcss 的插件，就是要修改这个档案。

新增主要 CSS 档

为了我们之後能方便的增添公用的新样式，这里需要建立一个 CSS 档，名称随意，但你可以跟我取一样的。

建立 tailwind.css

建立之後放入以下内容：

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

这边是新增完後的档案列表：

编译 Tailwind

为了产生给网页使用的 css 档，我们必须编译 Tailwind。我们可以透过你安装在专案中的 Tailwind 进行编译，也可以使用官方所提供的 TailwindCSS CLI。

在这边我们选择使用的是你安装在专案中的 Tailwind。主要 CSS 档是我前面建立的那个，输出 CSS 档则是我们要挂在网页上面的。现在我们透过这个指令来编译：

npx tailwindcss -i {主要CSS档} -o {输出的CSS档}

我习惯把输出的 css 档取名为 index.css 或是 style.css，那指令实际上就会是：

npx tailwindcss@^2.2.19 -i tailwind.css -o style.css

输入好你要的档名後就执行。
而因为要产生的 class 众多，需要等一小段时间。

编译完後，依照我这里，就会多出 style.css。

如果打开看会发现 style.css 里面已经全部都是写好的 css 样式，
这就是透过 Tailwind 编译後的成果。

这就是之前所介绍过的，Tailwind 会自动生成大量已经定义好的 CSS 给你用，就会产生像这样的内容供你直接使用。

指令

毕竟我们之後还有客制化的机会，
如果每次都要自己打那串指令真的太累了！

所以我们可以把指令加入 package.json 的 script 区段中，
这样下次就可以快速执行了：

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tailwindcss -i tailwind.css -o style.css"
    // ↑↑ 加上这行 ↑↑
  },
  ...
}

这样之後我们只需要执行这句指令就能编译了：

npm run build

非常方便，我们过几天也会再用到哦！

既然已经编译好了，我们就准备挂到页面上罗！

快乐使用 Tailwind

回到我们刚刚建立专案时所创建的 index.html，把编译後的 CSS 档挂载到页面上：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- ... -->
  <!-- ↓ 新增这行 ↓ -->
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <!-- ... -->
</body>
</html>

挂载之後，这是我们之前做过的一个变化模式作业，
直接贴到 body 里面：

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 font-bold flex justify-center items-center rounded-md cursor-pointer outline-none w-20 h-20 text-3xl text-white" tabindex="0">
    1
  </box>
  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 font-bold flex justify-center items-center rounded-md cursor-pointer outline-none w-20 h-20 text-3xl text-white" tabindex="1">
    2
  </box>
</div>

最後完整的 html 结构就会像是这个样子：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
    <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 font-bold flex justify-center items-center rounded-md cursor-pointer outline-none w-20 h-20 text-3xl text-white" tabindex="0">
      1
    </box>
    <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 font-bold flex justify-center items-center rounded-md cursor-pointer outline-none w-20 h-20 text-3xl text-white" tabindex="1">
      2
    </box>
  </div>
</body>
</html>

这时别害怕，大力的按下储存吧！储存之後赶紧去预览：

哦！！！！
是不是跟之前的作业一模一样，效果都有呢！

哈！抓到了！
如果你对我这边说的没有印象，那代表你没有写作业！
什麽？你说有写？有写本来就是应该的啊，不然出作业干嘛XD

补充

好啦，这边额外做点补充。

如果你觉得刚刚编译的过程很慢，其实是正常的。因为他是把所有可以用的 class 一次生成出来，这样不但要花一段时间，而且编译完的档案也很大。但是有办法可以解决的，比如之後很快就会谈到的生产环境优化与 JIT 模式。

还有，在现在这个阶段，若是有对配置档内容进行调整或增加客制化样式功能等等 (包含在主要 CSS 档中增加公用样式也算)，就必须重新编译一次 Tailwind，因为你加的那些样式是要给 PostCSS 看的，并非能直接在网页中使用。之後的 JIT 模式中也会有方法可以解决这个问题。

大致上就这样了！

如果今天这篇没有像之前这麽有趣，我对不起你们。
因为接下来的内容都很重要，不过我也会尽量让他们有趣点的！

给你们的回家作业：

作业实施要点：
- 试着自己从头到尾练习一次 Tailwind 的安装与设定，建立起你第一个小小的 Tailwind 练习专案。

关於兔兔们：

( # 兔兔小声说 )

以前兔兔听过卢广仲的一首歌，叫做「我爱你」
这首歌对我来说不特别，但听一次就记起来了，因为...

「曾、曾经在我眼前却又消失不见」
「这是今天的第六遍」

等等，这首歌不是「我爱你」吗，怎麽更像鬼片 XD

<<: Day 13-用了十几天，总算回头看 Language Syntax 文件

>>: Day 13 - Slide In on Scroll

Day 12：「我可不可以 CDN 就好？」- Tailwind 安装及设定

安装吧！别挣扎了 XD

建立专案

安装 Tailwind CSS

设定 Tailwind

产生配置档

新增主要 CSS 档

编译 Tailwind

指令

快乐使用 Tailwind

补充

给你们的回家作业：

Day2-不只都是英文名称 docker 和 k8s的关系

为了转生而点技能-JavaScript，day23(Promise介绍

[Day09] while、for 回圈

21 "准备完成" 用 PubSub 同步更新网页

Day 24 Ruby 哪些不是物件

Day 24 : 插件篇 03 — 如何让 Obsidian 自动推荐关联笔记 (上)？使用 Breadcrumbs 查看有哪些相关笔记可以连结

[iT铁人赛Day3]JAVA的键盘输入

每个人都该学的30个Python技巧｜技巧 27：常用的字串函式统整(字幕、衬乐、练习)

模型的内容04 def main()

Day 32 - 透过手机呼叫 Amazon API Gateway 上传图片到 S3

安装吧！ 别挣扎了 XD

建立专案

安装 Tailwind CSS

设定 Tailwind

产生配置档

新增主要 CSS 档

编译 Tailwind

指令

快乐使用 Tailwind

补充

给你们的回家作业：

安装吧！别挣扎了 XD