Tailwind CSS 3.0從零開始: 入門到實戰

Tailwind CSS 3.0從零開始: 入門到實戰

出版日期:
2022/09/21
9
700630
查詢門市庫存
★ 提升切版魅力!從初階到進階必學的新世代排版神器!
跟著 Tailwind CSS 降低開發響應式網站的時間,提升元件開發的效率。

內容簡介

★ 提升切版魅力!從初階到進階必學的新世代排版神器!
跟著 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 知名直播主
展開看更多

產品目錄

Chapter 01 關於 Tailwind CSS
1.1 什麼是 Tailwind CSS?
1.2 關於功能優先 Utility-First CSS
1.3 使用 Tailwind CSS 可減少以下困擾
1.4 Tailwind CSS VS Bootstrap
1.5 淺談 Flexbox 與 Grid

Chapter 02 開始吧!Get Started!
2.1 起手式:作業環境與安裝
2-2 壓縮檔案大小、安裝智能提示

Chapter 03 Tailwind CSS 核心知識
3.1 Utility-First 功能優先
3.2 每個 Utility class 都支援響應式與偽類
3.3 手機到桌上螢幕,所有元素都能自適應
3.4 增加Base樣式
3.5 偽類變體 Pseudo-Class Variants
3.6 設定自己想要的 Tailwind CSS 樣式 Variant
3.7 讓 Variants 成為偽類的強大神器
3.8 把重複使用的功能變成元件
3.9 新增自己的 Utility
3.10 使用官方套件定義樣式
3.11 自訂addBase 與 theme 主題

Chapter 04 JIT模式 (Just In Time Mode) 介紹
4.1 關於 JIT 模式
4.2 為什麼要使用 JIT 模式
4.3 JIT 模式設定
4.4 JIT 模式的有趣功能
4.5 JIT 的最新功能

Chapter 05 Dark Mode 深色模式
5.1 深色模式原理
5.2 起手式
5.3 實作練習

Chapter 06 PostCSS
6.1 關於預處理器與後處理器
6.2 預處理器
6.3 後處理器
6.4 PostCSS 起手式

Chapter 07 小試身手 - 用 Tailwind CSS 實作切版
7.1 切一個留言按鈕
7.2 三欄式圖文卡片開發實作
7.3 登入功能彈窗開發
7.4 翻轉卡片實戰:Tailwind CSS feat CSS

Chapter 08 開發實作
8.1 前言
8.2 個人部落格
8.3 用 Vue CLI + Tailwind CSS 開發旅遊網站
8.4 小結

Chapter 09 Tailwind CSS 發展與未來

作者介紹

許智庭

許智庭╱Tim Hsu

● 台北人,基督徒。

● 多年平面設計經驗,目前為前端工程師,開發經驗兩年。

● 「提姆寫程式」部落格作者,喜愛前端技術,樂於將所學技術知識透過文字分享。

規格

誠品貨碼 / 2682244597003
ISBN13 / 9786267146460
ISBN10 / 6267146464
EAN貨碼 / 9786267146460
頁數 / 304
裝訂 / P:平裝
語言 / 1:中文/繁體
尺寸 / 23X17X1.5CM
級別 / N:無
重量(g) / 557.4

退貨說明

退貨須知:

  1. 依照消費者保護法的規定,您享有商品貨到次日起七天猶豫期(含例假日)的權益(請注意!猶豫期非試用期),辦理退貨之商品必須是全新狀態(不得有刮傷、破損、受潮)且需完整(包含全部商品、配件、原廠內外包裝、贈品及所有附隨文件或資料的完整性等)。
  2. 請您以送貨廠商使用之包裝紙箱將退貨商品包裝妥當,若原紙箱已遺失,請另使用其他紙箱包覆於商品原廠包裝之外,切勿直接於原廠包裝上黏貼紙張或書寫文字。若原廠包裝損毀將可能被認定為已逾越檢查商品之必要程度,本公司得依毀損程度扣除回復原狀必要費用(整新費)後退費;請您先確認商品正確、外觀可接受,再行拆封,以免影響您的權利;若為產品瑕疵,本公司接受退貨。

依「通訊交易解除權合理例外情事適用準則」,下列商品不適用七日猶豫期,除產品本身有瑕疵外,不接受退貨:

  1. 易於腐敗、保存期限較短或解約時即將逾期。(如:生鮮蔬果、乳製品、冷凍冷藏食材、蛋糕)
  2. 依消費者要求所為之客製化給付。(如:客製印章、鋼筆刻字)
  3. 報紙、期刊或雜誌。
  4. 經消費者拆封之影音商品或電腦軟體。
  5. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務,經消費者事先同意始提供。(如:電子書)
  6. 已拆封之個人衛生用品。(如:內衣褲、襪類、褲襪、刮鬍刀、除毛刀等貼身用品)
  7. 國際航空客運服務。

若您退貨時有下列情形,可能被認定已逾越檢查商品之必要程度而須負擔為回復原狀必要費用(整新費),或影響您的退貨權利,請您在拆封前決定是否要退貨:

  1. 以數位或電磁紀錄形式儲存或著作權相關之商品(包含但不限於CD、VCD、DVD、電腦軟體等) 包裝已拆封者(除運送用之包裝以外)。
  2. 耗材(包含但不限於墨水匣、碳粉匣、紙張、筆類墨水、清潔劑補充包等)之商品包裝已拆封者(除運送用之包裝以外)。
  3. 衣飾鞋類/寢具/織品(包含但不限於衣褲、鞋子、襪子、泳裝、床單、被套、填充玩具)或之商品缺件(含購買商品、附件、內外包裝、贈品等)或經剪標或下水或商品有不可回復之髒污或磨損痕跡。
  4. 食品、美容/保養用品、內衣褲等消耗性或個人衛生用品、商品銷售頁面上特別載明之商品已拆封者(除運送用之包裝外一切包裝、包括但不限於瓶蓋、封口、封膜等接觸商品內容之包裝部分)或已非全新狀態(外觀有刮傷、破損、受潮等)與包裝不完整(缺少商品、附件、原廠外盒、保護袋、配件紙箱、保麗龍、隨貨文件、贈品等)。
  5. 家電、3C、畫作、電子閱讀器等商品,除商品本身有瑕疵外,退回之商品已拆封(除運送用之包裝外一切包裝、包括但不限於封膜等接觸商品內容之包裝部分、移除封條、拆除吊牌、拆除貼膠或標籤等情形)或已非全新狀態(外觀有刮傷、破損、受潮等)與包裝不完整(缺少商品、附件、原廠外盒、保護袋、配件紙箱、保麗龍、隨貨文件、贈品等)。
  6. 退貨程序請參閱【客服專區→常見問題→誠品線上退貨退款】之說明。
付款/配送