---
# System prepended metadata

title: Rails _6.1.6.1_ 安裝 Tailwind 3
tags: [專案]

---

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