# 第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. 點擊紅圈部分，即可下載壓縮檔。


## 啟動範例
1. 用vscode開啟專案，然後開啟終端機，並輸入：

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

npm install


2. 啟動範例

npm run dev

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