Tailwind CSS 介紹與實作

v3 介紹與實作

Jacy Chu

6 min readMar 31, 2023

📢 Tailwind CSS 系列文章共 3 篇，此篇為第 1 篇

📋 目錄

簡單介紹與安裝
使用的好處
v3 JIT版本介紹
[實作]基本說明

簡單介紹與安裝

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 。