---
# System prepended metadata

title: 使用NPM第一步安裝Tailwind css

---

# 使用NPM第一步安裝Tailwind css
---

事前先安裝[node.js](https://nodejs.org/en/)


![](https://i.imgur.com/PwB164E.png)

選擇左邊較穩定版本 14.17.6 LTS

打開終端機

![](https://i.imgur.com/uJTX6sm.png)

先輸入指令

```=
    cd desktop
    mkdir test
    cd test
```

![](https://i.imgur.com/KX3R0If.png)
先建立一個package.json
```=
    npm init
```
![](https://i.imgur.com/oVhNTrS.png)

使用code指令打開vscode
```=
    code .
```

![](https://i.imgur.com/bylmBNz.png)

終端機輸入安裝taillwindcss及postcss-cli和autoprefixer
```=
    npm install -D tailwindcss postcss-cli autoprefixer
```

![](https://i.imgur.com/xhmBdGY.png)



終端機輸入npx tailwindcss init -p
```=
    npx tailwindcss init -p 
```

![](https://i.imgur.com/mnooS5o.png)

vscode建立css檔案

```=
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
```

![](https://i.imgur.com/GWpyAzA.png)

接下來打開package.json

![](https://i.imgur.com/hzpw4ae.png)

```=
    "watch": "postcss css/style.css -o     dist/style.css --watch"
```

終端機輸入npm run watch輸入完
vscode自動生成出dist資料夾

![](https://i.imgur.com/u2llEkD.png)

在dist建立index.html
![](https://i.imgur.com/1Z5QTEL.png)

終端機安裝輕量化live server
```=
    npm install -g live-server
```

![](https://i.imgur.com/QU4CJZm.png)

安裝成功

終端機打開live-server
```=
    live-server dist    
```


![](https://i.imgur.com/WUoFHZs.png)

回到vscode測試live-server功能及tailwind是否引入成功
![](https://i.imgur.com/Imq9kxN.png)

如果沒問題就成功使用npm安裝tailwind
![](https://i.imgur.com/2xUbRSZ.png)
