升級前端技術從 Tailwind CSS 開始
快速實踐客製化網站樣式又易於維護的現代 CSS framework - Tailwind CSS ！
CSS 一直都是網站開發人員的痛點，亂七八糟的命名，無限的 important 互蓋，沒有限制的開發，會讓團隊欠下滿滿的技術債。 導入 Tailwind CSS 讓團隊有個共同的 CSS 架構。 其豐富內建的 utility class 滿足絕大部份的 layout，減少團隊客製化 style。 透過其強大的 config 設定，能夠快速擴充團隊所需要的 style。 當然也可以完美與 React / Vue 等任何 framework 整合。 Tailwind CSS 雖然可以快速引用進專案，但強大的功能還是需要透過 CLI 編譯。 課程會介紹到 Tailwind CLI 與 webpack 的整合應用，讓你開發起來更得心應手。
你將學到什麼
不管你是前端或後端工程師，在維護網站時總是會因為 CSS class 命名而經常搞混、還有 CSS 父層與子層選取的問題，經常讓接手的開發者相當頭痛，因為這些問題誕生了 Tailwind CSS ，他試圖要解決 CSS 維護的困難，讓工程師可以更專注在開發上，同時在 2021/11 月份發佈的 Tailwind CSS v3.0 版本中更是支援更多 CSS 樣式。
像是擴充更多色票、 Just-in-Time (讓開發時直接 Build 你有用到的 class)、左右滑動 (Scroll snap API)、更自由的 shadow 樣式等(更多 v3.0 更新內容請參考官方文件說明)
想要入手 Tailwind CSS 到你的專案嗎？ 👀
又或是你有遇到以下情境嗎？
接手專案時發現要修改 CSS 樣式時，因為上面包太多層，所以不得已下了很多 important 🧨
肥大的 CSS 樣式管理專案，改不動只好再寫一樣的 CSS 樣式 🧨
使用 Vue.js 或 React 前端框架開發客製化網站，但又希望可以好維護。
有接觸過 Tailwind CSS 但對於 CLI 、Webpack 整合還不熟悉，想要導入在現有的專案，但又不知道如何開始 😩
想知道 Tailwind CSS v3.0 升級了哪些功能？
之前只用過 Bootstrap 用 CDN 引入 CSS framework ，換到 Tailwind CSS 不知到如何開始。
這些，情境都可以在這堂課來聽奶綠茶老師分享，一起開始你的 Tailwind CSS 開發之旅！
這門課將由淺入深，奶綠茶老師將帶你從 Tailwind CSS 的特色說起、因應現在的前端框架的發展，Tailwind CSS 實際解決了開發上的哪些問題？以及它與 Bootstrap 的差異。
課程中後半段老師將花較大的篇幅分享如何將 Tailwind CSS 與 Webpack 、React、 Vue.js 整合應用。如果你是 React 或 Vue.js 的開發者可能好奇 Tailwind CSS 如果導入專案時會不會有什麼問題？
最後，也將會以現代的大型網站 Disney+ 、Nike 為例，教你用 Tailwind CSS 切出設計稿！學後立即應用！
🛎 課程提醒，上課之前你需要具備：
HTML/CSS 網頁架構與知識：
- 知道 HTML 網頁架構
- CSS 開發能力，能清楚的知道 flex 的屬性。
如果你尚未有這些知識，歡迎參考：
- 我們的課程：網頁前端設計女性專班
- 線上資源：學習該如何開發 Web 入門
如何評估自己是否適合這麼課？
- 在不使用任何 CSS framework 下，能手刻以下頁面(含 RWD)
- Album example | Bootstrap
JavaScript 基礎觀念：
- 課程會用到一些簡單的 JavaScript
- 如果想要學 JavaScript 歡迎參考：
課程大綱
- 導入 Tailwind CSS 的優點
- Tailwind CSS vs Bootstrap
- Tailwind CLI
- Webpack 與 Parcel 的整合應用
- Tailwind CSS 與 SCSS 整合
- Tailwind CSS custom theme
- Tailwind CSS config 擴充
- Tailwind CSS 與 React / Vue.js 的整合
- Tailwind CSS 與 Vite
- Tailwind CSS 與 CSS Module / BEM 的整合
- 現行已存在的專案如何導入 Tailwind CSS
- Tailwind CSS 優化
- 用 Tailwind CSS 輕鬆打造 Disney+ 網頁
- 用 Tailwind CSS 輕鬆打造 Nike 網頁
講師介紹
資深前端開發者與程式開發講師，授課資歷十年以上。
擅長 HTML、CSS、JavaScript、jQuery、Vue、React 開發應用與 Webpack 前端打包工具等，專修各種前端跨平台的疑難雜症。
另一個身份為花鬍子樂團吉他手，育有二貓，喜愛小酌。
推薦課程
你可能也會喜歡的學習內容
.jpg)
