👩💻 🧑💻 如果你是....
1. 前端工程師 / 網頁工程師
2. 對整合 CSS 架構有興趣的開發者
3. 對手上專案 CSS 亂七八糟,想知道 2022 最好用的 CSS 開發方式
4. 是 React 或 Vue.js 的開發者,想導入 Tailwind CSS 到專案內
5. 想要知道 Tailwind CSS 如何使用與整合
不管你是前端或後端工程師,在維護網站時總是會因為 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 的屬性。
如果你尚未有這些知識,歡迎參考:
如何評估自己是否適合這麼課?
JavaScript 基礎觀念:
- 課程會用到一些簡單的 JavaScript
- 如果想要學 JavaScript 歡迎參考: