Tailwind 安裝流程 (使用npm)

這幾天剛好在搞這個問題，所以趁勢來記錄一下~
我想可能不少人看不懂官方的安裝教學，所以我這邊就來統整。

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

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

基本的，就是無法 新增自訂顏色 跟 支援深色模式。
再進階一點，就是無法使用 `@apply` 指令將語法整理起來。
最嚴重的，就是 無法壓縮檔案，CDN 版大小約 2.79MB。 (完整版約 3.7MB~4MB)

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

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

安裝 Node.js (Ubuntu)

首先，如果你會用linux類系統，這個你肯定用過。不過新手們的話就別跳過，還是都跑一遍吧，以免你有指令沒跑到或東西沒裝到。


sudo apt update

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


sudo apt-get install curl

再來，使用到剛剛安裝的 curl，把 node.js 12版的安裝腳本下載下來。請注意，這邊一定要抓12版或更新的！


curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

你也可以改安裝我寫文章當下的最新的，14.x版。


curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

這下，就可以放心的把 node.js 安裝下去了~


sudo apt-get install nodejs

開始安裝 Tailwind

Tailwind CSS 需要 Node.js 版本在 12.13.0 以上

如果有看到上面的警告標語的人，請一定要注意 檢查一下 node.js 的版本是不是12.13以上 !!!

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

執行這個指令可以檢查 node.js 的版本。


node --version

如果檢查完，確定 node是12版以上，那也就放心地執行下面這行指令。


npm init

過程中會問你專案名稱叫什麼，你就看你的心情輸入，接著後面的東西你可以設定，也可以全部按 enter送出讓他保持預設值就好，最後會要你輸入 yes。那如果都跑完了，會看到專案中多增加了一個 package.json，這個檔案很重要，等等會用到。

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


npm install tailwindcss autoprefixer

再來，為了以防萬一，我們執行一次 `npm install` 來更新和安裝其他依賴套件的狀態。


npm install

那這樣就算安裝完了，只是距離使用，中間還有一些東西需要設定。如果你還會透過 postCSS 安裝其他插件、或是像官方的推薦使用 autoprefixer的話，可以在整篇結束之後，閱讀一下 postCSS 的安裝和設定。

設定 Tailwind

在使用 Tailwind CSS 之前，我們得產生 tailwind 必要的設定檔，這也是要達到 tailwind 客製化前最重要的一步。完成後應該就會在專案目錄下多出一個叫做 `tailwind.config.js` 的檔案。

npx tailwindcss init

這麼一來，就可以自訂專屬於你的 tailwind 設定了！但是別著急，後面還有一些手續要做呢。

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

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

建立完之後，我們在要用來寫樣式的 css檔 (我這邊叫做 tailwind.css) 裡面貼上下面的CSS語法。




/* 貼在用來寫樣式的css檔，範例這邊是 tailwind.css */
@tailwind base; 
@tailwind components; 
@tailwind utilities;

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

編譯

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




scripts:[
    /* ... 前面是你其它的設定值，略 .... */
    "{ 你的執行名稱 }": "tailwind build {你 css 檔擺放的路徑}/{要寫樣式的css檔名稱} -o {你 css 檔擺放的路徑}/{頁面要掛載的css檔名稱}"
],

如果把上述的名稱都取代完之後，在我這邊的範例，會長的像下面這樣：




scripts:[
    /* ... 前面是你其它的設定值，略 .... */
    "build-css": "tailwind build public/css/tailwind.css -o public/css/app.css"
],

最後，我們只要執行 `npm run {你的執行名稱}`，那他就會開始進行編譯了~


npm run build-css

編譯完成後，應該會在命令列 (終端機) 看到下面的訊息： ~~(請忽略我電腦很慢的事實)~~

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

歡樂使用 Tailwind CSS

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










<!-- 你專案中要使用 Tailwind CSS 的頁面 -->
<html>
    <head>
        <!-- 前略 -->
        <link rel="stylesheet" href="./{你CSS檔的路徑}/{要掛載在頁面的CSS檔名稱}">
    </head>
    <body>
        <!-- 略 -->
    </body>
</html>

底下這邊是我依照我專案所改寫後的。













<!-- 這範例是我專案中的 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>

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

同場加映：postCSS 的安裝和設定

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

安裝指令~


npm install tailwindcss autoprefixer postcss postcss-cli

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

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

Windows用戶

在專案目錄下新增檔案 -> 檔名為 "postcss.config.js"

Linux、Ubuntu、MacOS 類用戶，直接指令起來了啦~ 在專案目錄下：


touch postcss.config.js

新增完 `postcss.config.js`，我們要在檔案中加入下面的內容：







// postcss.config.js
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

或是用官方給的格式也可以~







// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

最後的最後，只要把前面設定執行的地方，改成




scripts:[
    /* ... 前面是你其它的設定值，略 .... */
    "{ 你的執行名稱 }": "postcss {你 css 檔擺放的路徑}/{要寫樣式的css檔名稱} -o {你 css 檔擺放的路徑}/{頁面要掛載的css檔名稱}"
],

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

Tailwind 安裝流程 (使用npm)

安裝 Node.js (Ubuntu)

開始安裝 Tailwind

設定 Tailwind

編譯

歡樂使用 Tailwind CSS

同場加映：postCSS 的安裝和設定

tags: tailwind

Read more

Difference between `git merge` and `git rebase`

在 vscode 中直接瀏覽並 debug 網站

期末考 Q3 結構

卡比 QnA 讀書會 | 如何寫好的 HTML

tags: `tailwind`