# Rails _6.1.6.1_ 安裝 Tailwind 3 ###### tags: `專案` ## 一 、 建立 6.1.6.1 專案 ```shell= rails _6.1.6.1_ new myprojectV3 ``` ```shell= cd myprojectV3 ``` ## 二 、 安裝 tailwind 1. 安裝臨時 tailwindcss 版號，以利執行 init 步驟 ```shell= yarn add -D tailwindcss ``` ```shell= yarn tailwindcss init ``` ```shell= code . ``` 2. 找到 **postcss.config.js** 檔案 在 postcss.config.js 加上 `require('tailwindcss')` ![](https://i.imgur.com/yGI8IZz.png) 3. 在 app/javascript/ 建立一個檔案 **application.css** ![](https://i.imgur.com/zpkttOo.png) 貼上這幾行 ```css= @import "tailwindcss/base"; @import "tailwindcss/utilities"; @import "tailwindcss/components"; ``` ![](https://i.imgur.com/3N8H5d7.png) 4. 依據 app/javascript/packs/ 這條路徑找到 application.js ，在裡面新增 ```js= import "../application.css" ``` ![](https://i.imgur.com/DBjGUc4.png) 5. 移除臨時 tailwindcss 版號 ```shell= yarn remove tailwindcss ``` 6. 安裝正式 tailwindcss 版號 ```shell= yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat ``` ## 三 、 測試是否成功 1. 建立一個 UserController 並具有 index 方法 ```rb= rails g controller users index ``` 2. 建立根目錄 ```rb= root 'users#index' ``` ![](https://i.imgur.com/3QKhYrk.png) 3. 在 index.html.erb 設定最後的 tailwind 測試樣式 ```html= <h1 class="text-9xl font-bold underline">終於要完成了</h1> ``` ![](https://i.imgur.com/qjl0IPr.png) 4. 啟動伺服器 ```shell= rails s ``` ![](https://i.imgur.com/cw3smW1.png) 5. 查看版本 ```shell= npm view tailwindcss version ``` ## 四 、 前後比較 ### 失敗 ![](https://i.imgur.com/bZe4izr.png) ![](https://i.imgur.com/HmqvGsX.png) ### 成功 **(不會有 stylesheet_link_tag 'tailwind')** ![](https://i.imgur.com/wfArx2W.png)