布魯斯的 Tailwind CSS 開發秘技｜輕鬆打造仿 Facebook UI

系列課程帶你一次上手 2 種主流 CSS 框架，讓你靈活快速應對各種專案

零基礎也適用 ! 帶你打造仿 Facebook 的社群網站 UI

# 利用 Tailwind CSS 做出動態牆、好友列表、彈跳視窗的聊天室等社群網站 UI

使用滿意度高達 87%！近年來最有潛力的 CSS 開發框架 

Tailwind CSS 是一個新興的 CSS 框架，不同於 Bootstrap 等其他 CSS 框架的地方是，Taiwind CSS 並不是一個 UI 工具包，它沒有包含任何主題，甚至沒有任何的 UI 組件。它有的是一堆預先定義好的 class，而這些 class 也僅僅是用簡單的 CSS 所組成，可以使用這些現有的素材組合出獨特的風格。

在核心概念上與其它框架有著極大的不同，因此 Tailwind CSS 適合用來架設高度客製化的網站，但是像是後台管理，那種 UI 簡單不須花時間刻版，或是瀏覽器版本較舊的網站，就不適合用 Tailwind CSS 開發。

專案想嘗試導入 Tailwind CSS ，但擔心因為不熟悉新技術而踩雷，整組壞光光？

痛點 1：嘗試將 Tailwind CSS 導入專案中，但因為不熟悉 Webpack、postcss 等工具，導致導入失敗

💡解法：課程將從認識這些工具開始教起，接著教你從零到一配置 Webpack 的前端專案，即使是剛接觸 CSS 框架的新手也能輕鬆入門。

痛點 2：和以往語意式的 class 使用方式不一樣，不太了解它的設計架構

💡解法：理解為什麼需要 Utility，而不是撰寫純 CSS， 讓你更明白為什麼要用 Tailwind CSS。

痛點 3：有多種的設定模式，需閱讀完整官方文件才可了解，學習成本較高

💡解法：老師將從基礎語法教起，包含自定義、Layout 的設定、網頁的互動效果，以及濾鏡等，最後帶你熟悉官方插件，並且手把手帶你作出仿 FB 網站 UI。

從基礎打底到業界應用 !建構完整 Tailwind CSS 知識體系

• 理解 Webpack 的基礎知識，構建前端專案的基礎架構
• 學習 postcss，並且把它跟 Tailwind CSS 整合進 Webpack 的專案

• 理解 Utility 解決了什麼在撰寫 CSS 上的痛點
• 熟悉 Utility 的使用，快速開發前端網站

• 講師融合過去開發的經驗，帶你規劃網站 UI

• 融會貫通框架使用，做出仿 FB UI

專業師資帶你輕鬆掌握框架，少踩許多開發痛點