Tailwind CSS 介紹及應用 - 昕力資訊

今天來跟大家推薦Tailwind CSS，它並不像Bootstrap、Material-UI一樣提供我們許多設計精美的UI元件，而是提供各種好用的class工具讓我們依照我們的 ... 當您輸入電子信箱、訂閱本公司之「電子報」時，我們會向您蒐集、處理、利用的個資為您的「電子信箱」以及「提交日期」，當您輸入電子信箱並送出時，即表示您同意我們使用您的個資，為保障您的權益，關於更多相關政策更新資訊，請務必閱讀我們的「隱私權政策」、「使用條款」及「免責聲明」。

如您不同意本網站之「隱私權政策」、「使用條款」及「免責聲明」，您可以隨時「取消訂閱」，謝謝您。

關閉 取消訂閱昕力資訊電子報 取消訂閱 關閉 關閉 是否確定取消註冊？將會永久刪除您在本站的帳號與資訊。

確定 取消 公告系統 × 目前無公告 首頁 網頁技術 HTML/CSS TailwindCSS介紹及應用 TailwindCSS TailwindCSS介紹及應用 林佩郁LinaLin 2020/12/1511:17:04 0 5500 前言 今天來跟大家推薦TailwindCSS，它並不像Bootstrap、Material-UI一樣提供我們許多設計精美的UI元件，而是提供各種好用的class工具讓我們依照我們的需求去高度客製化，也不會發生因為使用了CSS框架中設計好的元件，造成初期開發神速，到了中後期要更改的時候就寸步難行事件發生。

比較 Tailwind與Bootstrap差異   Tailwind  Bootstrap Framework  UtilityFramework UIFramework 壓縮後的檔案大小 ★★★ ★★★ 客製化程度 ★★★★ ★★★ 上手難易度 ★★★★ ★★ 適用人群 1.想高度客製版面2.有經驗的開發人員 1.想快速套用主題版面2.適合初學者入門 Tailwind提供了超級多的單一功能的CSSclass(例如.m-1 代表margin:0.25rem)。

改用 Tailwind後，我們首先會使用它眾多的class，偶有框架無法解決的部分才會考慮自己撰寫CSS。

這樣一來也解決了命名class的問題(例如.layout-topbar-wrapper)，再也不用想 class想破頭，一切讓 Tailwind幫我們搞定。

安裝 使用npm安裝Tailwind npminstalltailwindcss 使用方法 在css中加入以下語法就能開始使用 Tailwind @tailwindbase; @tailwindcomponents; @tailwindutilities; 小範例 如果只想要感受一下 Tailwind的魅力，可以到 TailwindPlay體驗，TailwindPlay 是 Tailwind官方架設的線上環境，官方保證與我們在本機操作時有一樣的環境，可以自訂config文件、使用功能(例如:@apply)，或者是自己加入第三方套件都可以！ 今天我們就用 TailwindPlay做一個卡牌翻面的畫面，可以開啟 這邊看看最終效果～ 因為我們此篇文章重點是在於介紹 TailwindCSS，所以針對CSS屬性的部分並不會講得非常詳細，對教學中某些屬性有興趣的同學，可以自行google～現在讓我們開始吧～ 進入 TailwindPlay會發現他的畫面分成左右兩部分，左側是編輯器，上方有三個頁籤，分別是HTML、CSS、Confing，右側是即時畫面。

他已經有寫好的範例，但我們今天沒有要用這個範例，所以可以直接全選刪掉左邊HTML中的所有東西。

我們先將灰色背景做出來，建立一個div然後加上class。

這邊我們先來看這幾個class是什麼意思。

.bg-gray-100{ --tw-bg-opacity:1; background-color:rgba(243,244,246,var(--tw-bg-opacity)); } .min-h-screen{ min-height:100vh; } .w-full{ width:100%; } 看完之後是不是發現就跟我們以前在Bootstrap使用的class一樣用法，只是命名規則略有不同，一開始使用時，因為不熟其命名規則，所以請大家記得勤奮的多翻翻官方字典 。

接下來我們來做卡片，一樣建立一個div然後加上class，這邊因為卡片有兩個面，所以裡面請包上兩個div。

正面 背面 然後你會發現 h-md、w-md是什麼東西?為什麼你沒有這個東西？別慌，這是利用Config加上的自定義 utilityclass，有時候我們需要的 utilityclass不在 字典裡面就可以這樣做，我們先將頁籤切換到 Config，然後把中間的colors部分刪掉，這是原本範例中用到的，我們並不會用到這邊的東西，我們會自己加上我們需要的部分，完整的程式碼如下圖。

module.exports={ theme:{ extend:{ height:{ md:'240px', }, width:{ md:'160px', }, }, }, variants:{}, plugins:[], } 目前畫面會變成下面圖中的樣子。

再來，相信你也有注意到，我們的class變得落落長的，有一些組合同時用於不同的div中，像這種時候，我們可以使用@apply來將這些 utilityclass收斂起來，我們先將頁籤切到CSS的部分，然後加入以下的程式碼。

.card{ @applyh-fullw-fullrounded-2xlshadow-xltransformcursor-pointer; } 然後將HTML中，原本重複的 utilityclass替換成我們自訂的新名稱。

(想看目前程式碼與畫面請點這邊) 正面 背面 現在看來是不是比較乾淨了一點呢?接下來我們將卡片的正面背面合起來，並且做出翻卡片的部分。

這邊目前我們使用了幾個沒有在 字典中的屬性(transform-style、backface-visibility)與在 字典 中雖然有屬性，但並沒有擴充到我們想要用的方法，像這種時候，我們就無法直接在Config中擴充，而是要自己在CSS中撰寫。

.card{ @applyabsoluteh-fullw-fullrounded-2xlshadow-xltransformcursor-pointer; backface-visibility:hidden; } .transform-style-3d{ transform-style:preserve-3d; } .transform-style-3d:active{ transform:rotateY(180deg); } .transform-rotateY-180{ transform:rotateY(180deg); } 這邊有兩個重點有提出來說，第一個是我們自定義的class可以同時用@apply與一般css的寫法，不會有衝突。

第二個是我們自行添加的CSS並無法使用 utilityclass的前綴字(例如：active:shadow-xl的意思就是，滑鼠點擊時有陰影)，還是要依照一般的寫法在CSS中添加狀態。

目前畫面會變成下面圖中的樣子。

(想看目前程式碼請點這邊) 接下來就是把卡片裝飾一下，把我們的Disney人物請上卡片，加上說明文字跟卡片下的白色背景，因為這邊並沒有使用到 Tailwind裡面的特別功能只是在各個元素中加上 utilityclass，所以這邊的步驟略過比較多CSS撰寫的部分，想看詳細的程式碼請點這邊～ 這邊特別要拿出來說的部份是字體，在 Tailwind中已經經有預設幾組字體(點這裡看有哪些預設字體)可以替換，只可惜沒有中文的字體，所以我們要自己加上想要的字體集，需要先在CSS中import進我們想要的字體，注意需要放在最上方，以免Tailwind讀不到，我這邊是加入了google字體中的NotoSans字集。

@importurl('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap'); @tailwindbase; @tailwindcomponents; @tailwindutilities; 再到Confing中加入擴充utilityclass的值 fontFamily:{ 'google':['NotoSansTC','sans-serif'], }, 接下來只需要按照老樣子到HTML中加入class，就可以囉～ 看看她是誰?

滑鼠左鍵長按即可將卡片翻面 最後來說說 Tailwind中的前綴詞魔法，在 Tailwind中有許多方便的前綴詞可供選用，在這個範例中，我們會利用前綴詞來做個簡易的RWD，在做之前我們先來翻翻字典中，有關於media的地方，然後記熟這個部分，不然會吃虧。

記熟了我們就往RWD之路出發囉，首先我們先想好卡片在小螢幕上想要的大小，我這邊是用195pxX130px，先將這個尺寸加入Config中。

height:{ sm:'195px', md:'240px', }, width:{ sm:'130px', md:'160px', }, 然後在CSS的.card-bg中將原本的h-md、w-md前方冠上前綴字sm:，變成sm:h-md、sm:w-md，再將h-sm、w-sm加在其後。

.card-bg{ @applyrelativesm:h-mdsm:w-mdw-smh-smtransform-style-3dtransitionduration-500m-3; } 讓我們來看看畫面呈現什麼樣子(想看目前的詳細程式碼請點這裡) 用這個前綴詞加上其他的class就可以組成千變萬化的畫面，CSS檔案也很乾淨，總體來說，使用 Tailwind中的前綴詞來製作RWD確實十分方便，那接下來我們可以將其他的部分慢慢完善，一樣因為這邊使用的技巧已經在上面都介紹完畢了，所以這邊的步驟就略過比較多CSS撰寫的部分，讓我們直接來看看最終結果，可以開啟 這邊看看最終程式碼～ 到這邊整個利用 TailwindCSS 製作翻卡片的範例就結束囉～ 結語 TailwindCSS一開始使用起來確實比較難上手，尤其是採用utilityclass的方式，會在html上留下一長串的足跡(真是看不慣也可以用@apply來做整理)，用久了之後卻會發現，這樣子的方法可以避免掉class擴張到後期共用越來越多時，牽一髮而動全身的窘境。

從今年的StateofCSS中也可以發現 TailwindCSS被越來越多人認識與使用，會不會取代老牌子Bootstrap還有待觀察，以我來說，試用後的感覺是不錯的，推薦給大家~   參考資料 Tailwind官網 CutesleepingDisneyprincesses(圖片來源) GoogleFont-NotoSansTC(字體來源) StateofCSS 0 點數申請 文章標題 : TailwindCSS介紹及應用 申請項目 : 檔案上傳 請選擇審查人員 暫存 確認 林佩郁LinaLin 相關文章 Rellax：輕鬆製造滾動視差效果 我把CSS變成Photoshop了！我跟mix-blend-mode剛認識 CSS霓虹燈閃爍文字 CSS：文字漸層與鏤空遮罩效果 CSS&SVG::BlobAnimation CSS切版-不規則邊框 最新文章 操作手勢與介面佈局：6.1吋智慧手機使用者可觸及範圍探索 Rellax：輕鬆製造滾動視差效果 Harbor升級步驟：從v1.10.1升級至v2.5.0 SpringCloud--Gateway服務網關架構、特性及工作流程 [讀懂]深入淺出Beanutils的不足與自定義 AngularCustomModal-共用元件實作-彈窗(3) 最熱門文章 同作者文章 確定 取消 × 登入