---
# System prepended metadata

title: 安裝流程 (使用 npm，開啟 jit) | Tailwind CSS
tags: [tailwind]

---

---
title: 安裝流程 (使用 npm，開啟 jit) | Tailwind CSS
tags: tailwind
---

Tailwind 安裝流程 (使用npm，開啟 jit)
==

因為 Tailwind 若是靠 CDN 的方式，會導致很多強大的功能沒有全開，我們這邊就簡單舉例幾個：

![](https://huibizhang.com/Contributions/TailwindCSS/images/bad.svg =30x30) 基本的，就是無法 **==新增自訂顏色==** 跟 **==支援深色模式==**。
![](https://huibizhang.com/Contributions/TailwindCSS/images/bad.svg =30x30) 再進階一點，就是無法使用 **`` `@apply` ``** 指令將語法整理起來。
![](https://huibizhang.com/Contributions/TailwindCSS/images/bad.svg =30x30) 最嚴重的，就是 **==無法壓縮檔案==**，CDN 版大小約 2.79MB。 (完整版約 3.7MB~4MB)

所以你只是為了**玩玩、體驗 tailwind 的特性及帶來的方便性**，我完全**推薦你可以使用 CDN** 的方式就好，可是如果你今天想要變成品上線、或是當公司產品的話，這個沒壓縮的大小很有可能讓你被火了XDDD。

那既然知道安裝有這麼多好處，我們當然就是趕快開始來安裝吧~，可是在這之前，要提醒一下 Windows 使用者，接下來教學的前半部會是 ==Ubuntu 系統的 node.js 安裝教學==，Windows 用戶的你裝起來==不會遇到困難==，所以請你直接 [點這裡跳到屬於你的段落](#開始安裝-Tailwind)。
&nbsp;

安裝 Node.js (Ubuntu)
--
首先，如果你會用linux類系統，這個你肯定用過。不過新手們的話就別跳過，還是都跑一遍吧，以免你有指令沒跑到或東西沒裝到。
```shell==
sudo apt update
```

接著，這個很重要，要安裝 ==curl==。 因為等一下就要靠他了。

```shell==2
sudo apt-get install curl
```

再來，使用到剛剛安裝的 curl，把 ==node.js 12版==的安裝腳本下載下來。請注意，這邊==一定要抓12版或更新的！==
```shell==3
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
```
你也可以改安裝我寫文章當下的最新的，14.x版。
```shell==3
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
```

這下，就可以放心的把 node.js 安裝下去了~
```shell==4
sudo apt-get install nodejs
```
&nbsp;

開始安裝 Tailwind
--
:::warning
*Tailwind CSS 需要 Node.js 版本在 12.13.0 以上*
:::
如果有看到上面的警告標語的人，請一定要注意 **==檢查一下 node.js 的版本是不是12.13以上 !!!==** 

<br>

> 這邊開始，Windows 和其他系統的步驟是一樣的，可以放心觀看，但在放心觀看及學習之前，請把你目前==命令列 (終端機)== 的路徑調到 **==專案資料夾==** 下，不然永遠會沒效果。

<br>

執行這個指令可以檢查 node.js 的版本。
```shell==
node --version
```

如果檢查完，確定 node是12版以上，那也就放心地執行下面這行指令。
```shell==2
npm init
```
過程中會問你專案名稱叫什麼，你就看你的心情輸入，接著後面的東西你可以設定，也可以全部按 enter送出讓他保持預設值就好，最後會要你輸入 yes。那如果都跑完了，會看到專案中多增加了一個 ==package.json==，這個檔案很重要，等等會用到。
&nbsp;

接著，快樂地執行下面這行指令來安裝 tailwind，還有它依賴的 autoprefixer。 ~~(終於開始安裝了)~~
```shell==3
npm install tailwindcss autoprefixer 
```

再來，為了以防萬一，我們執行一次 `` `npm install` `` 來更新和安裝其他依賴套件的狀態。
```shell==3
npm install
```
那這樣就算安裝完了，只是距離使用，中間還有一些東西需要設定。如果你還會透過 postCSS 安裝其他插件、或是像官方的推薦使用 autoprefixer的話，可以在整篇結束之後，閱讀一下 [postCSS 的安裝和設定][postCSS]。
&nbsp;

設定 Tailwind
--
在使用 Tailwind CSS 之前，我們得==產生 tailwind 必要的設定檔==，這也是要達到 tailwind 客製化前最重要的一步。完成後應該就會在專案目錄下多出一個叫做 `` `tailwind.config.js` `` 的檔案。
```shell==''
npx tailwindcss init -f --jit
```
這麼一來，就可以自訂專屬於你的 tailwind 設定了！ 但是別著急，後面還有一些手續要做呢。

現在需要在你存放css樣式檔的資料夾裡，==建立兩個 css檔==，一個是你==頁面要掛載的== style.css (名稱可自訂)，一個是==用來寫 css樣式的== tailwind.css(名稱也可自訂)。這樣你可能不懂，我拿我的專案目錄來舉例好了。

<center>

<!-- ![](https://i.imgur.com/VidVytw.png)-->
![](https://i.imgur.com/SLrk4vo.png)

</center>

在我的專案下，擺放css檔的路徑是 /public/css ，那就在這個資料夾底下產生兩個 css檔，名稱自訂，我這邊是把要掛載的叫做 app.css，要寫樣式內容的叫做 tailwind.css。

建立完之後，我們在要用來寫樣式的 css檔 (我這邊叫做 tailwind.css) 裡面==貼上下面的CSS語法==。
```css=
/* 貼在用來寫樣式的css檔，範例這邊是 tailwind.css */
@tailwind base; 
@tailwind components; 
@tailwind utilities;
```

貼好之後就可以進行下一步了，然後我們要掛載的 css 檔 (這邊叫做 app.css) ==保持空白==就好，以後所有==要補充的樣式==都寫在另一個 css 檔裡。 (這邊叫做 tailwind.css)，因為如果接下來 **==進行編譯==**， 要掛載的 css 檔 (app.css) 的 **==內容會被覆蓋掉==**。
&nbsp;

### 編譯
我們終於進入最後的手續了。 這邊我們需要開啟剛剛 `` `npm init` `` 執行後產生的 ==package.json==。開啟後，在 scripts 裡面加一行：

```json==
scripts:[
    /* ... 前面是你其它的設定值，略 .... */
    "{ 你的執行名稱 }": "tailwind build {你 css 檔擺放的路徑}/{要寫樣式的css檔名稱} -o {你 css 檔擺放的路徑}/{頁面要掛載的css檔名稱}"
],
```
如果把上述的名稱都取代完之後，在我這邊的範例，會長的像下面這樣：
```json==
scripts:[
    /* ... 前面是你其它的設定值，略 .... */
    "build-css": "tailwindcss -i public/css/tailwind.css -o public/css/app.css --minify",
    "jit-watch": "tailwindcss -i public/css/tailwind.css -o public/css/app.css -w"
],
```

最後，我們只要執行 `` `npm run {你的執行名稱}` ``，那他就會開始進行編譯了~
```shell==
npm run build-css
```
編譯完成後，應該會在命令列 (終端機) 看到下面的訊息： ~~(請忽略我電腦很慢的事實)~~

![](https://i.imgur.com/vYO0NIn.png)

這樣就算編譯完成了~~~ 
現在只要你==在頁面掛上要掛載的css檔==，並用上 tailwind 語法，就會有效果囉！
<br>

歡樂使用 Tailwind CSS
--
終於，到了豐收的時刻。 在你網頁中插入的 css 檔路徑要改成剛剛上面說過的，用來==掛載在頁面上的 CSS 檔==。

```htmlembedded=
<!-- 你專案中要使用 Tailwind CSS 的頁面 -->
<html>
    <head>
        <!-- 前略 -->
        <link rel="stylesheet" href="./{你CSS檔的路徑}/{要掛載在頁面的CSS檔名稱}">
    </head>
    <body>
        <!-- 略 -->
    </body>
</html>
```
底下這邊是我依照我專案所改寫後的。
```htmlembedded=
<!-- 這範例是我專案中的 index.html -->
<html>
    <head>
        <!-- 前略 -->
        <link rel="stylesheet" href="./css/app.css">
    </head>
    <body>
        <!-- 馬上用 Tailwind 寫一個熱騰騰的黃綠藍三色漸層 Hello World 方塊 -->
        <div class="m-3 p-10 bg-gradient-to-r from-yellow-400 via-green-400 to-blue-400 text-white">
          Hello World ! I'm using Tailwind CSS Now ~
        </div>
    </body>
</html>
```
<br>

終於結束囉~~~~ 
這樣就把 Tailwind CSS 安裝完了，這樣你就可以盡情地使用 Tailwind 寫出一堆美美的介面了啦!! 不過後面還會遇到檔案太大，[需要壓縮的問題](#)，我們就以後再談囉。

<br>


同場加映：postCSS 的安裝和設定
--
那如果有些人需要同時使用好幾個 postCSS 的套件，又或者以後可能會需要用到 postCSS，那下面這就是補充說明了。 其實在官網 Tailwind 它好像預設希望你裝 postCSS，不過我們這邊就是給需要的人就好了。 雖然已經說了很多廢話，但不再多說了，馬上開始吧！

安裝指令~
```shell==
npm install tailwindcss autoprefixer postcss postcss-cli
```
那剛剛上面這個指令，就是幫你的專案透過 npm 安裝 ==tailwindcss==、postcss、autoprefixer，及 ==postcss-cli== 這四個東西。那如果有看過官方教學，或看過我翻譯的安裝篇，對前三個東西應該不陌生，只是最後一個也是必須的，算是幫官方安裝過程的補充。

在我們剛剛很前面的步驟產生完 tailwind 設定檔之後，我們要來產生 postCSS 的設定檔，不然 postCSS 不會幫我們載入 tailwind 和 autoprefixer。

- **Windows用戶**
```shell==''
在專案目錄下新增檔案 -> 檔名為 "postcss.config.js"
```

- **Linux、Ubuntu、MacOS 類用戶**，直接指令起來了啦~ 在專案目錄下：
```shell==
touch postcss.config.js
```
<br>

新增完 `` `postcss.config.js` ``，我們要在檔案中==加入下面的內容==：
```javascript==
// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}
```
或是用官方給的格式也可以~
```javascript==
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```
最後的最後，只要把前面設定執行的地方，改成
```json==
scripts:[
    /* ... 前面是你其它的設定值，略 .... */
    "{ 你的執行名稱 }": "postcss {你 css 檔擺放的路徑}/{要寫樣式的css檔名稱} -o {你 css 檔擺放的路徑}/{頁面要掛載的css檔名稱}"
],
```

那剩下的步驟，都跟上面 tailwind 的教學一樣囉~ 多出來或不一樣的步驟都列在這裡了，祝你 tailwind 玩得愉快!!!

</br>
---
> [name=搋兔 Tryto] 最近有點偷懶，這篇花了兩天呢！一樣，如果有錯歡迎標註並留言哦～

###### tags: `tailwind`

<!-- === 連結 ============== -->
[postCSS]: #同場加映：postCSS-的安裝和設定


<!-- === CSS設定 ============== -->
<style>
    a {
        color:#0072E3;
        text-decoration: none;
        transition:color 0.75s;
    }
    a:hover {
        color:#84C1FF;
        text-decoration: none;
        transition:color 0.75s;
    }
    .markdown-body mark {
        border-radius: 5px;
        color:#c7254e;
        background-color:#f9f2f4;
    }
</style>

<!-- === CSS：程式碼深色主題 ============== -->
<style>
    .markdown-body pre {
        background-color: rgb(31, 41, 55);
        border: 1px solid #555 !important;
        color: #CCCCCC;
        border-radius:12px;
        /*border-radius:0px;*/
    }
    .markdown-body pre .hljs-tag {
        color: #BAE5FD;
    }
    .markdown-body pre .hljs-keyword {
        color: #20D3EE;
    }
    .markdown-body pre .hljs-string {
        color:#BEF263;
    }
    .markdown-body pre .hljs-comment {
        color:#9CA3B0;
    }
    .markdown-body pre .hljs-attr {
        color:#20D3EE;
    }
    .markdown-body pre .hljs-name {
        color:#E87BF9;
    }
    .markdown-body pre .hljs-built_in {
        color:#F76E79;
    }
</style>