--- 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>