0人評分過此書
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 知名直播主
跟著 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 知名直播主
- 為什麼要寫這本書
- 推薦序1
- 推薦序2
- 本書使用的版本
- 什麼人適合看這本書
-
01 關於Tailwind CSS
-
1.1 什麼是 Tailwind CSS？
-
1.2 關於功能優先 Utility-First CSS
-
1.3 使用 Tailwind CSS可減少以下困擾
-
1.3.1 最不好的方式：覆蓋 CSS
-
1.3.2 下載定義好的程式碼
-
1.3.3 引入後再覆寫Sass
-
1.3.4 Class 的命名
-
-
1.4 Tailwind CSS VS Bootstrap
-
1.5 淺談 Flexbox與Grid
-
1.5.1 Flexbox
-
1.5.2 Grid
-
-
-
02 開始吧！Get Started！
-
2.1 起手式：作業環境與安裝
-
2.1.1 使用CDN 匯入
-
2.1.2 使用PostCSS
-
2.1.3 透過Tailwind CLI安裝
-
2.1.4 Tailwind CSS Playground
-
-
2.2 壓縮檔案大小、安裝智能提示
-
2.2.1 壓縮Tailwind CSS檔案大小，提高渲染效能
-
2.2.2 工欲善其事，必先「下」其器
-
-
-
03 Tailwind CSS核心知識
-
3.1 Utility-First功能優先
-
3.1.1 傳統的 CSS撰寫方式
-
3.1.2 寫這麼多class，為什麼不寫inline style
-
-
3.2 每個Utility class都支援響應式與偽類
-
3.2.1 怎麼寫響應式斷點
-
3.2.2 使用Bootstrap設定響應式
-
3.2.3 使用Tailwind CSS增加斷點
-
3.2.4 偽類也是一樣的方法
-
3.2.5 響應式卡片元件實戰
-
-
3.3 手機到桌上螢幕，所有元素都能自適應
-
3.3.1 不只單元素，多個元素也可以完成合體技
-
3.3.2 不需要寫手機版斷點
-
3.3.3 單一斷點導向
-
3.3.4 客製化斷點
-
-
3.4 增加Base樣式
-
3.4.1 覆蓋原本Base樣式
-
3.4.2 覆蓋預設文字樣式
-
-
3.5 偽類變體Pseudo-Class Variants
-
3.5.1 偽類變體與響應式的合體技
-
-
3.6 設定自己想要的Tailwind CSS樣式Variant
-
3.6.1 使用Variant來設定自己想要的樣式
-
3.6.2 建議覆蓋預設配置檔的內容
-
3.6.3 v3.0版本後全面開放所有屬性
-
-
3.7 讓Variants成為偽類的強大神器
-
3.7.1 Group-hover
-
3.7.2 客製化自己的 Variants
-
-
3.8 把重複使用的功能變成元件
-
3.8.1 使用@apply語法將重複的樣式包裝成元件
-
3.8.2 元件相同時，把共用樣式拉出來
-
-
3.9 新增自己的Utility
-
3.9.1 新增功能起手式
-
3.9.2 支援原本的variants的功能
-
3.9.3 新增偽類效果
-
-
3.10 使用官方套件定義樣式
-
3.10.1 官方套件起手式
-
3.10.2 typography排版套件
-
3.10.3 提供五種基礎字體大小與顏色
-
3.11.3 支援深色模式
-
3.10.4 Forms表單官方套件
-
-
3.11 自訂addBase與theme主題
-
3.11.1 自訂addBase 套件
-
3.11.2 自訂主題 theme
-
-
-
04 JIT 模式(Just In Time Mode)介紹
-
4.1 關於JIT模式
-
4.2 為什麼要使用JIT模式
-
4.3 JIT模式設定
-
4.4 JIT模式的有趣功能
-
4.4.1 支持偽元素
-
4.4.2 透明度
-
4.4.3 使用變數的方式來改變顏色、字體或任何屬性值
-
4.5.4 修改input游標
-
-
4.5 JIT的最新功能
-
-
05 Dark Mode深色模式
-
5.1 深色模式原理
-
5.2 起手式
-
5.3 實作練習
-
5.3.1 寫兩個按鈕
-
5.3.2 在CSS修改base的body樣式
-
5.3.3 寫入事件
-
5.3.4 成果
-
-
-
06 PostCSS
-
6.1 關於預處理器與後處理器
-
6.2 預處理器
-
6.3 後處理器
-
6.4 PostCSS起手式
-
-
07 小試身手──用Tailwind CSS實作切版
-
7.1 切一個留言按鈕
-
7.1.1 架構與基礎內容建構好
-
7.1.2 加入Tailwind CSS樣式
-
7.1.3 使用@apply將重複的樣式整合
-
-
7.2 三欄式圖文卡片開發實作
-
7.2.1 分析架構
-
7.2.2 加入樣式
-
7.2.3 加上互動
-
7.2.4 加上RWD響應式效果
-
-
7.3 登入功能彈窗開發
-
7.3.1 建立彈窗背景
-
7.3.2 登入介面開發
-
7.3.3 加上Javascript做出彈窗功能
-
-
7.4 翻轉卡片實戰：Tailwind CSS feat CSS
-
7.4.1 卡片版面實作
-
7.4.2 合併卡片
-
7.4.3 翻轉卡片
-
-
-
08 開發實作
-
8.1 前言
-
8.2 個人部落格
-
8.2.1 專案架構
-
8.2.2 閱讀設計稿
-
8.2.3 頁頭與橫幅
-
8.2.4 作者資訊與文章列表以及文章內容
-
8.2.5 圖文內容與頁尾之實作
-
8.2.6 加入斷點實作響應式網站
-
-
8.3 用Vue CLI+Tailwind CSS開發旅遊網站
-
8.3.1 建議安裝nvm切換版本
-
8.3.2 使用Vue CLI建立專案
-
8.3.3 在Vue安裝Tailwind CSS
-
8.3.4 開發前準備
-
8.3.5 分類標籤開發
-
8.3.6 開發景點頁面
-
8.3.7 開發美食頁面
-
8.3.8 開發住宿頁面
-
-
8.4 小結
-
- 09 Tailwind CSS發展與未來
- 出版地 ： 臺灣
- 語言 ： 繁體中文
- DOI ： 10.978.6267146/460
評分與評論
請登入後再留言與評分
PDF
PDF
PDF
