Tailwind CSS
概念
Tailwind CSS 是一個 utility-first CSS 框架，可以將網頁樣式建立在較小的、可重用的"實用"的 class 之上，例如：text-red 紅色文字
優點
- 快速開發
- 減少命名煩惱
- 檔案容量小
Tailwind configuration
module.exports = {
//使用預設配置
presets: [require("@acmecorp/tailwind-base")],
//定義要掃描產生對應CSS樣式的檔案路徑
content: ["./src/**/*.{html,js}"],
// 自訂預設樣式(全域修改)
theme: {
colors: {
blue: "#1fb6ff",
},
fontFamily: {
sans: ["Graphik", "sans-serif"],
},
//在預設樣式下做擴充(倘若一樣會覆蓋原本的設定)
extend: {
borderRadius: {
"4xl": "2rem",
},
},
},
// 加入套件
plugins: [require("@tailwindcss/typography")],
// 啟用或禁用核心套件
corePlugins: {
container: false, // 禁用容器樣式
},
};
自定義樣式
- 使用
@apply
透過 @apply可以創建自定義樣式。適用於非常小、高度可重用的東西，例如：按鈕或表單等，但在 React 中使用更適合用元件
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}
}
<!-- After extracting a custom class -->
<button class="btn-primary">Save changes</button>
- 新增 CSS 樣式
@tailwind base;
@tailwind components;
@tailwind utilities;
.my-custom-style {
/* ... */
}
為了獲得更多功能，還可以使用@layer 將樣式新增至 Tailwind 的 base、components 和 utilities 圖層
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.my-custom-style {
/* ... */
}
}
base , components and utilities layers
Tailwind 依據 ITCSS原則將樣式分為三個層級
base layer
- 基本層級（Base Layer）主要用於 reset 樣式或應用於原始 HTML 元素的預設樣式，例如：body、h1 等
- Base layer 樣式不應該被輕易覆蓋
/* Base Layer */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
components layer
- 組件層級（Components Layer）包含基於類別的樣式，這些樣式用於定義可重用的 UI 組件，如按鈕、卡片等。
- 可以透過 Tailwind 的 utility layer 進行覆蓋和調整
/* Components Layer */
@layer components {
.btn {
@apply py-2 px-4 bg-blue-500 text-white rounded;
}
}
Utilities Layer
- 實用工具層級（Utilities Layer）包含小而單一用途的 class。
- 這些 utility 應優先於所有其他樣式，並允許輕鬆地進行樣式覆蓋
- 主要用於調整邊距、填充、文字對齊等細微樣式變化
/* Utilities Layer */
@layer utilities {
.content-auto {
content-visibility: auto;
}
}