---
# System prepended metadata

title: 第 11 章 TailwindCSS實戰，仿Facebook網站UI - 動態牆篇！PART 3
tags: [Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI]

---

# 第 11 章 TailwindCSS實戰，仿Facebook網站UI - 動態牆篇！PART 3
###### tags: `Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI`

## 仿FB UI全單元原始碼
https://github.com/scps960740/TailwindCSS_Fake_Fb_Ui

## 圖片資源
https://hackmd.io/-4cSssbFRla8A2JvX6KhgA

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

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


## 啟動範例
1. 用vscode開啟專案，然後選擇相對應章節，`例如：第10章第一單元就選擇10-1`
2. 然後開啟終端機，並輸入：
```
// 根據安裝package.json內的依賴列表來安裝node_modules

npm install
```

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



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

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

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