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

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

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


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

1. 下載原始碼後解壓縮，進入到webpackTailwind資料夾
2. 用vscode開啟專案，然後開啟終端機，並輸入：

// 根據安裝package.json內的依賴列表來安裝node_modules

npm install


3. 啟動範例

npm run dev

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


## 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打開即可。