Tailwind CSS 3.0 從零開始 - 入門到實戰
活動訊息
內容簡介
★ 提升切版魅力!從初階到進階必學的新世代排版神器!
跟著 Tailwind CSS 降低開發響應式網站的時間,提升元件開發的效率。
「非官方文件」的導讀,帶領你了解基礎核心知識,直接上場做 project 開發!
多人開發前端 project,團隊卻經常因為標籤命名不夠精準產生溝通困難?
從網頁切版進入前端的世界,對於 UI/UX 息息相關的前端工程師,介面的設計規劃除了手刻能力要講究,在專案時程很趕的時候就會需要使用到框架來快速建構網頁畫面。對於多人開發 project 而言,光是想每個標籤使用的類別名稱就會燒腦到不行,命名就變成一種學問。
2019 年崛起的 Tailwind CSS 打破過往 CSS 框架的思維,您只需要考慮樣式優先的撰寫方式,專注於要給予列表的背景顏色、邊框顏色、文字顏色、按鈕需不需要滑鼠經過有效果,或是排版要怎麼安排,只需要從功能去發想,不需要先去想命名,這在開發上省下相當多的時間!
本書為【擁有 CSS 與 RWD 開發經驗的網頁設計師與前端工程師】、【多人協作開發專案有統一風格需求的團隊】、【網站需要高客製化的元件需求專案】的最強參考書籍!
作者著重在實際開發時的心得與情境,帶您從零開始,入門核心觀念、實作小功能介面,到呈現一個基本頁面的響應式網頁,後續也使用 jQuery 與 Vue.JS 為範例作為框架引入 Tailwind CSS 實際開發案例,完成一個靜態網頁。
本書使用 Tailwind CSS 版本:V3.0
現在就跟著本書輕鬆活用 Tailwind CSS 提升你的前端網站渲染效果!擺脫多人團隊專案風格紊亂無序的困擾吧!
本書特色
● 從零開始介紹 Tailwind CSS 的核心知識、安裝方式、基本元件建立,帶領讀者快速入門
● 透過許多基礎元件感受 Tailwind CSS 的特色與魅力!
● 功能優先特色,打造獨一無二的元件
● 透過 Tailwind CLI 的編譯,讓網頁渲染效果提升!
● 多個元件與功能實作/以及 2 個中大型範例開發/Vue.js 與 Tailwind CSS 的完美結合
● 六角學院創辦人兼校長 廖洧杰 推薦
● 熱愛 JavaScript 知名直播主 Tommy 推薦
專業推薦
「這本書除了詳細講解 Tailwind 技術外,更棒的是還分享許多切版範例題目,最後面還顧及開發者的程度,貼心提供 jQuery 與 Vue CLI 的技術整合範例。充分看出作者不希望你單純『看』這本書,而是『真的動手做』,才能將技術變成自己的東西。」—— 廖洧杰/六角學院創辦人兼校長
「除了官網的文件外,Tim 用自身經驗,融合了實作上會遇到的一些問題,也算是某種程度上的經驗談,手把手的方式帶領讀者能更順利達成實作,非常適合新手或考慮轉到 Tailwind CSS 的開發者閱讀。」—— Tommy/熱愛 JavaScript 知名直播主
目錄
序/導讀
序
「為什麼要寫這本書」
本書是改編 2021 iThome 鐵人賽《Tailwind CSS - 從零開始》系列文章,從事平面設計多年,從網頁切版進入前端的世界,對於使用者介面與體驗息息相關的前端工程師,介面的設計規劃除了手刻能力要講究,在專案時程很趕的時候就會需要使用到框架來快速建構網頁畫面。而 2019 年崛起的 Tailwind CSS 打破過往 CSS 框架的思維,只需要考慮樣式優先的撰寫方式,在開發上省去很多不必要的困擾,例如:每個標籤使用的類別名稱,光是想這個就會燒腦到不行,如果是自己開發那就算了,但如果是多人開發的專案,命名就變成一種學問。網路有個笑話是這樣說的:「命名自己的孩子只要考慮自己喜不喜歡,但程式開發命名需要在意別人喜不喜歡。」
在開發上也經過想命名的這個階段,雖然到現在開發一些專案依然需要去想這些東西,但在開發經驗累積下,大概命名也就那些規則(笑),不過最令人痛苦的就是多層次的表單或是階層式的畫面,命名名稱會越來越長。當我開始使用 Tailwind CSS 時候,令我驚艷,因為我只需要專注我現在要給這些列表的背景顏色、邊框顏色、文字顏色、按鈕需不需要滑鼠經過有效果,或是排版要怎麼安排,我只需要從功能去發想,不需要先去想命名,這在開發上省下相當多的時間,雖然一開始的類別名稱會非常的長,會有點不習慣,甚至開發到一個程度後,會覺得整頁 template 非常凌亂,但這都是後面才要擔心的事情。
Tailwind CSS 官方文件說明非常完整,而本書會著重在我實際開發時的心得與情境,帶您從零開始,入門核心觀念、實作小功能介面到呈現一個基本頁面的響應式網頁,後續也會使用 jQuery 與 Vue.JS 為範例作為框架引入 Tailwind CSS 實際開發案例,完成一個靜態網頁。雖然會使用 Vue.JS 作為範例,但本書不會說明 webpack 的運作方式,部分頁面若有 JavaScript 語法僅作為範例所需要的呈現,不會做太詳細的說明,也不會完整導覽官方文件所說的所有內容。
感謝 iThome 鐵人賽讓我可以透過此平台呈現這次的系列文進而改編成冊,感謝深智數位的肯定與賞識邀稿出版,在二寶待產當天接到邀請通知,並在診所討論撰稿事宜,並耐心包容我這個手忙腳亂的二寶爸生活,晚上還協助我處理校稿事宜,感謝布魯斯前端的 Tailwind CSS 的線上課程成為這次系列的啟發,感謝太太這段轉職之路不離不棄的陪伴與支持,最後感謝上帝的恩典,讓我有這個機會將所學變成書籍可以讓想學這門技術的朋友能夠少走點冤枉路。
看到這裡,以上提及本書內容您還有興趣,就一起來學習新世代的 CSS 框架吧!
配送方式
-
台灣
- 國內宅配:本島、離島
-
到店取貨:
不限金額免運費
-
海外
- 國際快遞:全球
-
港澳店取:
訂購/退換貨須知
退換貨須知:
**提醒您,鑑賞期不等於試用期,退回商品須為全新狀態**
-
依據「消費者保護法」第19條及行政院消費者保護處公告之「通訊交易解除權合理例外情事適用準則」,以下商品購買後,除商品本身有瑕疵外,將不提供7天的猶豫期:
- 易於腐敗、保存期限較短或解約時即將逾期。(如:生鮮食品)
- 依消費者要求所為之客製化給付。(客製化商品)
- 報紙、期刊或雜誌。(含MOOK、外文雜誌)
- 經消費者拆封之影音商品或電腦軟體。
- 非以有形媒介提供之數位內容或一經提供即為完成之線上服務,經消費者事先同意始提供。(如:電子書、電子雜誌、下載版軟體、虛擬商品…等)
- 已拆封之個人衛生用品。(如:內衣褲、刮鬍刀、除毛刀…等)
- 若非上列種類商品,均享有到貨7天的猶豫期(含例假日)。
- 辦理退換貨時,商品(組合商品恕無法接受單獨退貨)必須是您收到商品時的原始狀態(包含商品本體、配件、贈品、保證書、所有附隨資料文件及原廠內外包裝…等),請勿直接使用原廠包裝寄送,或於原廠包裝上黏貼紙張或書寫文字。
- 退回商品若無法回復原狀,將請您負擔回復原狀所需費用,嚴重時將影響您的退貨權益。
商品評價
你要黑白印刷程式碼就要印的清楚,
但很明顯這本書沒有做到,
不推這本書。
要學 Tailwind CSS 可以到 B 站找教學影片,
比這本書好多了。