新手入門：TailwindCSS 與 DaisyUI 的整合指南

更新日期： 2025 年 1 月 1 日

TailwindCSS 是一個高效的實用工具類 CSS 框架，專為快速構建現代化網頁設計而設計。

結合 DaisyUI 插件後，您可以更輕鬆地使用預設的 UI 組件，進一步提高開發效率。

本指南將幫助您從安裝到配置，全面掌握 TailwindCSS 的使用方法，並了解它如何與其他工具如 PostCSS、Autoprefixer 和 DaisyUI 協作。

安裝 TailwindCSS 和相關工具

安裝必要的套件

確保您的專案中已包含以下工具：

• TailwindCSS：核心工具，用於生成實用工具類別的 CSS。
• PostCSS 和 Autoprefixer：處理 CSS 並增加瀏覽器兼容性。
• PostCSS Import：支持 @import 語法，方便模組化開發。

若需要重新安裝，執行以下指令：

npm install tailwindcss postcss autoprefixer postcss-import --save-dev

初始化 TailwindCSS 配置

TailwindCSS 的配置文件 tailwind.config.js 是自定義框架行為的核心。

以下為範例配置內容：

module.exports = {
  content: [
    "./templates/**/*.html",   // 掃描 HTML 模板
    "./static/**/*.js",        // 掃描 JS 文件
    "./*/templates/**/*.html", // 支援其他目錄的模板
  ],
  theme: {
    extend: {},                 // 自定義主題
  },
  plugins: [require("daisyui")], // 啟用 DaisyUI 插件
};

配置亮點

1. 內容檢測範圍
   Tailwind 需要知道在哪些文件中檢測 CSS 類別，從而生成優化的 CSS 文件。
   • 這可以減少未使用樣式的生成，讓輸出更小且高效。

content: [
  "./templates/**/*.html",
  "./static/**/*.css",
  "./*/templates/**/*.html",
]

2. 自定義設計系統
   Tailwind 提供擴展功能，您可以定義專案專屬的配色、間距等設計元素。 範例：

theme: {
  extend: {
    colors: {
      primary: '#1DA1F2',
      secondary: '#14171A',
    },
  },
}

3. 啟用 DaisyUI 插件
   DaisyUI 提供預設的 UI 元件，讓開發者快速構建一致性的界面。

plugins: [require("daisyui")]

PostCSS 與 Autoprefixer 的作用

PostCSS 的功能

PostCSS 是一個靈活的 CSS 處理工具，通過插件擴展功能，例如：

• 支持現代 CSS 語法：轉換為瀏覽器兼容的格式。
• 模組化開發：允許通過 @import 引入多個 CSS 文件。

Autoprefixer 的功能

Autoprefixer 是 PostCSS 的一個插件，用於根據目標瀏覽器的支持範圍自動添加 CSS 前綴，確保兼容性。例如：

/* 原始 CSS */
display: flex;

/* 經過 Autoprefixer 處理 */
display: -webkit-box;
display: -ms-flexbox;
display: flex;

配置 PostCSS

在 postcss.config.js 文件中啟用插件：

module.exports = {
  plugins: {
    'tailwindcss': {},       // 編譯 TailwindCSS 指令
    'autoprefixer': {},      // 添加瀏覽器前綴
    'postcss-import': {},    // 處理 @import 語法
  }
};

建立 CSS 文件結構

文件組織

• 主要輸入文件：./frontend/styles/app.css
• 引用的其他文件：
  • searchpage.css：包含頁面特定樣式。
  • tailwind.css：處理 TailwindCSS 的核心指令。

app.css 的內容

在主 CSS 文件中，使用 @import 引入其他樣式文件：

@import "./searchpage.css";
@import "./tailwind.css";

tailwind.css 的內容

tailwind.css 文件應包含以下基本指令，用於生成 Tailwind 的基礎樣式：

@tailwind base;
@tailwind components;
@tailwind utilities;

編譯 TailwindCSS

執行以下指令來生成或監控變更生成 CSS 文件：

單次生成

npx tailwindcss -i ./frontend/styles/app.css -o ./static/styles/app.css --minify

監控模式

在 package.json 中添加腳本：

"scripts": {
  "css": "npx tailwindcss -i ./frontend/styles/app.css -o ./static/styles/app.css --watch"
}

執行：

npm run css

生成的 CSS 文件將輸出到 ./static/styles/app.css。

在 HTML 文件中使用生成的 CSS

引用生成的 CSS 文件：

<link href="./static/styles/app.css" rel="stylesheet">

DaisyUI：快速構建 UI 元件

DaisyUI 是基於 TailwindCSS 的 UI 套件，提供多樣化的預設組件，如按鈕、卡片和表單等，適合快速搭建頁面。

範例

直接使用 DaisyUI 提供的組件：

<button class="btn btn-primary">Click Me</button>

總結

在本指南中，我們了解了：

• 如何安裝和配置 TailwindCSS。
• PostCSS 和 Autoprefixer 的作用。
• 使用 DaisyUI 快速構建 UI 元件。

這些工具的組合不僅提高了開發效率，還讓樣式管理變得更加簡潔和高效。現在，您可以開始使用 TailwindCSS 和 DaisyUI 構建您的專案，打造現代化的網頁設計！ 🎉