---
# System prepended metadata

title: 第 1 章 開始之前 - 行前準備！準備工具跟理解框架的區別！
tags: [Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI]

---

# 第 1 章 開始之前 - 行前準備！準備工具跟理解框架的區別！
###### tags: `Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI`

# 第一單元

## 環境準備/安裝步驟
1. 安裝[Node.js](https://nodejs.org/en/) 
2. 安裝[Chrome](https://www.google.com/chrome/?brand=BNSD&gclid=Cj0KCQjw0emHBhC1ARIsAL1QGNeTL4kcnAWJoKZ9bH3uoSo1BECoUu2BkoeMeE3442Cl4oB5rrAzzWkaAjpGEALw_wcB&gclsrc=aw.ds) 
3. 安裝[vscode](https://code.visualstudio.com/)
4. 一坨vscode插件（下方）
5. 一顆快樂的心

## 一坨vscode插件們

- Name: HTML Snippets
Id: abusaidm.html-snippets
Description: Full HTML tags including HTML5 Snippets
Version: 0.2.1
Publisher: Mohamed Abusaid
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

- Name: HTML CSS Support
Id: ecmel.vscode-html-css
Description: CSS Intellisense for HTML
Version: 1.10.2
Publisher: ecmel
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

- Name: JavaScript (ES6) code snippets
Id: xabikos.javascriptsnippets
Description: Code snippets for JavaScript in ES6 syntax
Version: 1.8.0
Publisher: charalampos karypidis
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

- Name: Live Server
Id: ritwickdey.liveserver
Description: Launch a development local Server with live reload feature for static & dynamic pages
Version: 5.6.1
Publisher: Ritwick Dey
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

- Name: Tailwind CSS IntelliSense
Id: bradlc.vscode-tailwindcss
Description: Intelligent Tailwind CSS tooling for VS Code
Version: 0.6.9
Publisher: Brad Cornes
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss


# 第二單元


## TailwindCSS vs Bootstrap5

| 特性 | TailwindCSS | Bootstrap5 |
| -------- | -------- | -------- |
| 類型     | Utility     | Component     |
| 內建組件     | 無     | 有     |
| IE支援     | 2.0以後不支援     | 不支援     |
| 客製化     | 方便     | 還好    |
| 痛點     | webpack整合等等     | 客製化     |

## 命名問題？

- 語義化命名
```
profile-title > p .....
profile-desc 
```

- 工具型命名
```
align-center text-sm
```

## 我自己的經驗
在接案公司、Yahoo、17、幣安、TikTok使用過CSS框架嗎？

## 該如何選擇？

- 專案迭代速度快，不需要維護，對CSS開發要求不高，例如：接案等等  -> BS5
- 專案需要長期維護，CSS客製化要求高，例如：公司本身的產品等等 -> TailwindCSS

