租期14天
今日租書可閱讀至2025-02-03
★ 提升切版魅力!從初階到進階必學的新世代排版神器!
跟著 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 知名直播主
- 為什麼要寫這本書(第I頁)
- 推薦序 1(第III頁)
- 推薦序 2(第IV頁)
- 本書使用的版本(第V頁)
- 什麼人適合看這本書(第VI頁)
- 01 關於 Tailwind CSS(第1-1頁)
- 1.1 什麼是 Tailwind CSS ?(第1-2頁)
- 1.2 關於功能優先 Utility-First CSS(第1-3頁)
- 1.3 使用 Tailwind CSS 可減少以下困擾(第1-5頁)
- 1.4 Tailwind CSS VS Bootstrap(第1-8頁)
- 1.5 淺談 Flexbox 與 Grid(第1-12頁)
- 1.5.1 Flexbox(第1-12頁)
- 1.5.2 Grid(第1-14頁)
- 02 開始吧!Get Started!(第2-1頁)
- 2.1 起手式:作業環境與安裝(第2-2頁)
- 2-2 壓縮檔案大小、安裝智能提示(第2-10頁)
- 03 Tailwind CSS 核心知識(第3-1頁)
- 3.1 Utility-First 功能優先(第3-2頁)
- 3.2 每個 Utility class 都支援響應式與偽類(第3-7頁)
- 3.3 手機到桌上螢幕,所有元素都能自適應(第3-22頁)
- 3.4 增加 Base 樣式(第3-30頁)
- 3.5 偽類變體 Pseudo-Class Variants(第3-35頁)
- 3.6 設定自己想要的 Tailwind CSS 樣式 Variant(第3-38頁)
- 3.7 讓 Variants 成為偽類的強大神器(第3-44頁)
- 3.8 把重複使用的功能變成元件(第3-50頁)
- 3.9 新增自己的 Utility(第3-57頁)
- 3.10 使用官方套件定義樣式(第3-64頁)
- 3.11 自訂 addBase 與 theme 主題(第3-75頁)
- 04 JIT 模式(Just In Time Mode)介紹(第4-1頁)
- 4.1 關於 JIT 模式(第4-2頁)
- 4.2 為什麼要使用 JIT 模式(第4-2頁)
- 4.3 JIT 模式設定(第4-3頁)
- 4.4 JIT 模式的有趣功能(第4-5頁)
- 4.5 JIT 的最新功能(第4-11頁)
- 05 Dark Mode 深色模式(第5-1頁)
- 5.1 深色模式原理(第5-2頁)
- 5.2 起手式(第5-3頁)
- 5.3 實作練習(第5-4頁)
- 06 PostCSS(第6-1頁)
- 6.1 關於預處理器與後處理器(第6-2頁)
- 6.2 預處理器(第6-2頁)
- 6.3 後處理器(第6-4頁)
- 6.4 PostCSS 起手式(第6-5頁)
- 07 小試身手-用 Tailwind CSS 實作切版(第7-1頁)
- 7.1 切一個留言按鈕(第7-2頁)
- 7.2 三欄式圖文卡片開發實作(第7-12頁)
- 7.3 登入功能彈窗開發(第7-28頁)
- 7.4 翻轉卡片實戰:Tailwind CSS feat CSS(第7-35頁)
- 08 開發實作(第8-1頁)
- 8.1 前言(第8-2頁)
- 8.2 個人部落格(第8-3頁)
- 8.3 用 Vue CLI + Tailwind CSS 開發旅遊網站(第8-48頁)
- 8.4 小結(第8-106頁)
- 09 Tailwind CSS 發展與未來(第9-1頁)
同分類熱門書