---
# System prepended metadata

title: 第 4 章 TailwindCSS教學 基礎篇1 - 理解框架知識、各種安裝方式
tags: [Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI]

---

# 第 4 章 TailwindCSS教學 基礎篇1 - 理解框架知識、各種安裝方式
###### tags: `Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI`

## 原始碼
https://github.com/scps960740/TailwindCSS_GET_STARTED/

## 下載
1. 點擊Code的綠色下拉按鈕
2. 點擊紅圈部分，即可下載壓縮檔。

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

## Tailwind安裝方法1 - webpack + tailwind.config 配置一次搞定！
### 啟動專案

1. 下載原始碼後解壓縮，進入到webpackTailwind資料夾
2. 用vscode開啟專案，然後開啟終端機，並輸入：
```
// 根據安裝package.json內的依賴列表來安裝node_modules

npm install
```

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

3. 啟動範例
```
npm run dev
```

4. 之後在瀏覽器打開終端機裡顯示的url，即可看到畫面

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


## Tailwind安裝方法2 - 專案沒有webpack？來用用tailwind cli！
### 啟動專案

1. 下載原始碼後解壓縮，進入到tailwindCLI資料夾
2. 用vscode開啟專案，然後開啟終端機，並輸入：
```
// 根據安裝package.json內的依賴列表來安裝node_modules

npm install
```

3. 運行以下指令構建tailwind css

```
npm run build
```

4. 用GoLive打開即可


## Tailwind安裝方法3 - cdn引入與它的利與弊
### 啟動專案

1. 下載原始碼後解壓縮，進入到cdn資料夾
2. 直接用GoLive打開即可。
