Tailwind CSS 介紹與實作
📢 Tailwind CSS 系列文章共 3 篇,此篇為第 1 篇
📋 目錄
簡單介紹與安裝
Tailwind CSS 是一個開放原始碼 CSS 框架。此工具庫與 Bootstrap 等其他 CSS 框架不同,沒有為元素提供一系列預定義 class,而是創建一個「工具程式型(Utility)」CSS 類別列表,這些 class 可用於通過混搭和媒合來設定每個元素的樣式。
[補充]參考文章:
Tailwind CSS 到底是良藥還是毒藥?
可以參考Tailwind CSS與原生CSS的差異。
安裝
Tailwind CLI安裝方法:
先建立一個資料夾,並在終端機 cd 到資料夾內輸入下方指令:
npm init
npm install -D tailwindcss
npx tailwindcss init
生成一個 tailwind.config.js 檔案
若想查看安裝的版本可以輸入下方指令:
npm info tailwindcss version
筆者記錄此篇時 版本是 v3.27
使用的好處
官網提供的特點
Tailwind CSS 好處
- 不用花時間想class名稱
- CSS檔案不會無止盡成長擴大
- 讓改動更安全 不會影響到其他的class
跟 inline style差異
style每個數字都有如魔法,有設計系統會讓UI設定更一致。
media queries部分可以輕易被實現, RWD 實作更方便,hover, focus等等動作可以快速設定。
v3 版本 JIT 即時編譯
從 Tailwind CSS 版本 3 開始,即時編譯模式將成為預設模式。
即時編譯 JIT
即時編譯模式 (Just-In-Time) 是產生 CSS 的另一種方法,此方法並非生成所有的 class 類別,再刪除所有未使用的 class,而是解析 HTML 文件的內容(或設定的副檔名或路徑位置)和立即只產生那些所需要使用的 class。因為不再產生所有可能的變數,因而大幅減少了產生的 CSS 的等待時間和大小。
全部建置與消除
版本 3 之前的 Tailwind 預設模式是系統根據專案設定產生所有可能的 CSS 組合。然後,通過另一個工具程式(如 PurgeCSS),走訪所有檔案,並從產生的 CSS 檔案中刪除未使用的 class。由於變數的數量與其組合可以產生的類別的 class,這種方法的缺點是等待時間長,並且在消除之前的 CSS 文件很大。
[實作]基本說明
接續前面提到的安裝
在專案中加入 src 資料夾,並在其中加入 input.css
並在 tailwind.config.js 中加入路徑 content: [“./dist/**/*.{html,js}”]
input.css 中加入
@tailwind base;
@tailwind components;
@tailwind utilities;
至 package.json 檔案中的 scripts 加入
"build-css": "tailwindcss build -i src/input.css -o dist/style.css"
在終端機下指令
npm run build-css
在檔案夾中即產生 dist 資料夾以及一個編譯過的 style.css 檔案,行數大約落在五百多行,相較完整版本一萬多行,精簡很多。之後每次要編譯都輸入上方此指令。
接著在 src 資料夾中加入 index.html 檔案,並加上下方程式碼:
打開瀏覽器即可看見:
🦖 專案建立好,接下來會是做中學的模式🛠
官方文件提供完整詳細的設定說明,此段落整理實作過程的學習。
專案畫面左方有選單,右方有一個熱量資料表。由於此系列與練習著重在 CSS 的設定,而非操作功能的開發,故此畫面上的按鈕與分頁只有顯示用途。
Step1 加入左邊的選單
程式碼如下:
此時畫面如下:
這是初步的設定,可以從上方看到 text-gray-700
去設定字體的顏色跟色階
hover:bg-white
還有cursor-pointer
去設定當游標移動到指定元素上的樣式,如下圖:
Step2 加入自定義顏色
左方玫瑰色並非在 tailwind 本身提供的色調中,可以在 tailwind.config.js 檔案中做設定。在 theme 的 extend 中 加入自定義色調 primaryrose
。
module.exports = {
darkMode: 'class',
content: ["./dist/**/*.{html,js}"],
theme: {
extend: {
colors: {
primaryrose: '#F4E6E6',
}
},
},
variants: {
extend: {},
},
plugins: [],
}
使用時,可以直接與 tailwind class 規則併用。像是設定背景,可以直接用 bg-primaryrose
。
step3 加入資料表
資料表格的部分,不使用任何現成的套件,以最原始的元素<thead><tbody><td><tr>等這些建構。
參考 superfly 的資料表:https://codepen.io/superfly/pen/wvvPLZB
完整程式碼如下:
目前的畫面:
⛄ Tailwind CSS can be very efficient for developers.