# 把手教學Tailwind CSS 安裝 ![](https://i.imgur.com/C3eqZzm.png =200x) 跟著懶人步驟安裝Tailwind 吧 我們就直接在該專案下安裝吧 專案下終端機執行 **Install Tailwind CSS** ``` 二選一 $yarn add tailwindcss $yarn add -D tailwindcss postcss autoprefixer ``` -D 開發時，難道上線不需要嗎？ 其實要上線時會掃看看專案用哪些class並打包，用到的留下， 沒用到的丟掉俗稱tree shaking(最後上線時只會打包有用到的css)， 就不用承受一大包佔空間。像CDN就沒有這種好處。 所以我們依據[tailwindcss](https://tailwindcss.com/docs/installation/using-postcss)提供的```-D```語法執行 ``` $yarn tailwindcss init ``` :::info 我們可以參考有經驗分享的文[rails 6 Tailwind](https://www.honeybadger.io/blog/tailwind-css-rails/) ::: 接下來有幾個步驟要處理 **1. 找到postcss.config.js檔案** 在postcss.config.js加上require('tailwindcss') **2. 在app/javascript/ 建立一個檔案 application.css** 貼上這幾行 ```ruby= @import "tailwindcss/base"; @import "tailwindcss/utilities"; @import "tailwindcss/components"; ``` **3. app/javascript/packs/application.js** 依據上面這條路徑找到application.js 新增```import "../application.css``` ![](https://i.imgur.com/NAqSV7N.png =500x) 跑個```$foreman s``` 看看現在如何 結果出錯發現版本問題 我們繼續解決問題 果然如別人經驗說的一樣 不相容 看看截圖中他還反諷謝囉～ 一開始的二選都會遇到現在的問題， 根據這位小哥，是說很好處理～ ![](https://i.imgur.com/UZe8ryU.png =500x) 首先拔掉 再裝一個別的相容 ``` $ yarn remove tailwindcss postcss autoprefixer #移除 $ $yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat #改裝這個相容性的 ``` 再次執行```$foreman s```接下來在rails 6 使用 tailwind就沒毛病啦 [感謝Jeffrey Morhous 分享的rails 6 Tailwind](https://www.honeybadger.io/blog/tailwind-css-rails/)