---
# System prepended metadata

title: 第9章 TailwindCSS實戰，仿Facebook網站UI - 建立專案篇！PART 1
tags: [Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI]

---

# 第9章 TailwindCSS實戰，仿Facebook網站UI - 建立專案篇！PART 1

###### tags: `Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI`


## 實戰仿Facebook UI 建立專案目錄
## 初始化專案步驟（沿用第六章的起始專案）

1. 下載：https://github.com/scps960740/ch06-start-project

2. 用vscode打開專案後，打開終端機，運行以下指令：

```
npm i
```

3. 啟動dev server

```
npm run dev
```

4. 修改code後，可以用prettier排版

```
npm run prettier
```

### 作業Git上傳流程

```
// 看看檔案狀態

git status

// 把目錄下所有檔案（除了.gitignore），變成準備上傳的狀態

git add .

// 提交commit，可以理解成建立存擋點的概念

git commit -m '輸入你想記錄的訊息'

// 看看有沒有成功commit

git log

// 上傳至master主線，一般來說在真正工作上不會直接推主線，但只是為了作業需求沒關係的

git push origin master

```

### 一般實際工作上的Git基本流程

```
// 從master新開一條分支branch

git checkout -b 取個你喜歡的分支名稱

// 看看檔案狀態

git status

// 1.把目錄下所有檔案（除了.gitignore），變成準備上傳的狀態

git add . 

// 2.把個別檔案，變成準備上傳的狀態

git add /xxx/xxx/xxx/test.js

// 提交commit，可以理解成建立存擋點的概念

git commit -m '輸入你想記錄的訊息'

// 看看有沒有成功commit

git log

// 上傳至master主線，一般來說在真正工作上不會直接推主線，但只是為了作業需求沒關係的

git push origin 你取的分支名稱

// 之後在平台上（github, gitlab等等）發起pull request(PR)，

// 交由其他同事review PR，然後沒問題再merge合併這次PR裡的所有存擋點(commits)到master主線。

```

### FB tailwindcss theme

```
colors: {
  'fb-bg': '#18191a',
  'fb-header': '#242526',
  'fb-input': '#3a3b3c',
  'fb-popover': '#3e4042',
  'fb-active': '#323436',
  'fb-card': '#242526',
  'fb': '#2e89ff'
}
```

## 實戰仿Facebook UI 基礎JS DOM操作 範例原始碼

https://github.com/scps960740/TailwindCSS_JSDOM

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

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


## 啟動範例
1. 用vscode開啟專案，然後開啟終端機，並輸入：
```
// 根據安裝package.json內的依賴列表來安裝node_modules

npm install
```

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



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

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

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


