---
tags: tailwind,入門
---

Tailwind CSS 繁體中文技術文件
===

- [](/@lalarabbits/Utility-First_tailwind)

相關資源
---
* [　官方技術文件](https://tailwindcss.com/docs) [target=_blank]

* [　元件庫](/@lalarabbits/Components_tailwind)

* [　Tailwind 遊樂場](https://play.tailwindcss.com)

起手式 (GETTING STARTED)
---
* [安裝 (Installation)](/@lalarabbits/Inatallation_tailwind)
* 預編譯器 (Using with Preprocessors)
* 生產環境優化 (Optimizing for Production)
* 瀏覽器支援 (Browser Support)
* IntelliSense 插件

核心概念 (CORE CONCEPTS)
---
* [功能優先 (Utility-First)](/@lalarabbits/Utility-First_tailwind)
* 響應式設計 (Responsive Design)
* Hover, Focus 以及其他狀態 (Hover, Focus, & Other States)
* [深色模式 (Dark Mode)](/@lalarabbits/DarkMode_tailwind)
* 增加基底樣式 (Adding Base Styles)
* 提取成元件 (Extracting Components)
* 增加新功能 (Adding New Utilities)
* 函數與指令 (Functions & Directives)

對齊 (BOX ALIGNMENT)
---
* Justify Content
* Justify Items
* Justify Self
* Align Content
* Align Items
* Align Self
* Place Content
* Place Items
* Place Self

間距 (SPACING)
--
* 內距 (Padding)
* 外距 (Margin)
* 元素間距 (Space Between)

尺寸大小 (SIZING)
--
* 寬度 (Width)
* 最小寬度 (Min-Width)
* 最大寬度 (Max-Width)
* 高度 (Height)
* 最小高度 (Min-Height)
* 最大高度 (Max-Height)

文字版式 (TYPOGRAPHY)
--
* 字型 (Font Family)
* 字體大小 (Font Size)
* 文字平滑化 (Font Smoothing)
* 字體樣式 (Font Style)
* 字體粗細 (Font Weight)
* 文字特殊變化(Font Variant Numeric)
* 字元間距 (Letter Spacing)
* 行高 (Line Height)
* List 樣式種類 (List Style Type)
* List 樣式位置 (List Style Position)
* Placeholder 的顏色 (Placeholder Color)
* Placeholder 的透明度 (Placeholder Opacity)
* 文字對齊 (Text Align)
* 文字色彩 (Text Color)
* 文字透明度 (Text Opacity)
* 文字樣式 (Text Decoration)
* 文字變形 (Text Transform)
* 文字溢出 (Text Overflow)
* 垂直對齊 (Vertical Align)
* 空格 (Whitespace)
* 斷句 (Word Break)

背景 (BACKGROUNDS)
--
* 背景捲動 (Background Attachment)
* 背景裁切 (Background Clip)
* 背景顏色 (Background Color)
* 背景透明度 (Background Opacity)
* 背景位置 (Background Position)
* 背景的重複 (Background Repeat)
* 背景尺寸 (Background Size)
* 背景圖片 (Background Image)
* 漸層色標 (Gradient Color Stops)

邊框 (BORDERS)
---
* 圓邊、圓角 (Border Radius)
* 邊框粗細 (Border Width)
* 邊框顏色 (Border Color)
* 邊框透明度 (Border Opacity)
* 邊框樣式 (Border Style)
* 分割線寬度 (Divide Width)
* 分割線顏色 (Divide Color)
* 分割線透明度 (Divide Opacity)
* 分割線樣式 (Divide Style)
* 輪廓寬度 (Ring Width)
* 輪廓色彩 (Ring Color)
* 輪廓透明度 (Ring Opacity)
* 輪廓寬度偏移 (Ring Offset Width)
* 輪廓色彩偏移 (Ring Offset Color)

基底樣式 (BASE STYLES)
---
* Preflight

排版 (LAYOUT)
--
* 容器 (Container)
* 樣式接續 (Box Decoration Break)
* 容器尺寸計算 (Box Sizing)
* 顯示模式 (Display)
* 浮動 (Floats)
* 清除浮動 (Clear)
* 物件適配 (Object Fit)
* 物件位置 (Object Position)
* 溢出 (Overflow)
* 滾動過度行為(Overscroll Behavior)
* 位置 (Position)
* 上、下、左、右 (Top / Right / Bottom / Left)
* 可見度 (Visibility)
* 圖層 (Z-Index)

彈性化排版 (FLEXBOX)
--
* 彈性方向 (Flex Direction)
* 彈性 Wrap (Flex Wrap)
* Flex
* 撐滿 (Flex Grow)
* 收縮 (Flex Shrink)
* 排序 (Order)

網格 (GRID)
---
* 網格列數 (Grid Template Columns)
* 網格跨列 (Grid Column Start / End)
* 網格行數 (Grid Template Rows)
* 網格跨行 (Grid Row Start / End)
* 自動網格化 (Grid Auto Flow)
* 自動列數 (Grid Auto Columns)
* 自動行數 (Grid Auto Rows)
* 網格間隙 (Gap)

特效 (EFFECTS)
---
* 陰影 (Box Shadow)
* 透明度 (Opacity)

濾鏡 (FILTERS)
--
* 濾鏡 (Filter)
* 模糊 (Blur)
* 亮度 (Brightness)
* 對比 (Contrast)
* 陰影 (Drop Shadow)
* 灰階 (Grayscale)
* 色相 (Hue Rotate)
* 色彩反轉 (Invert)
* 飽和度 (Saturate)
* 護眼色調 (Sepia)
* 背景濾鏡 (Backdrop Filter)
* 背景模糊 (Backdrop Blur)
* 背景亮度 (Backdrop Brightness)
* 背景對比 (Backdrop Contrast)
* 背景灰階 (Backdrop Grayscale)
* 背景色相旋轉 (Backdrop Hue Rotate)
* 背景負片 (Backdrop Invert)
* 背景透明度 (Backdrop Opacity)
* 背景飽和度 (Backdrop Saturate)
* 背景護眼色調 (Backdrop Sepia)

表格 (TABLES)
--
* 表格邊框 (Border Collapse)
* 表格排版 (Table Layout)

動畫 (TRANSITIONS AND ANIMATION)
--
* 過渡動畫的屬性 (Transition Property)
* 過渡的時間長度 (Transition Duration)
* 過渡的時機 (Transition Timing Function)
* 過渡動畫的延遲 (Transition Delay)
* 動畫效果 (Animation)

客製化 (CUSTOMIZATION)
---
* 設定 (Configuration)
* 主題 (Theme)
* 斷點 (Breakpoints)
* 色彩 (Colors)
* 間距 (Spacing)
* 變化模式 (Variants)
* 插件 (Plugins)
* 預設集 (Presets)

變形 (TRANSFORMS)
---
* 變形 (Transform)
* 原點變形 (Transform Origin)
* 縮放 (Scale)
* 旋轉 (Rotate)
* 平移 (Translate)
* 傾斜 (Skew)

互動性 (INTERACTIVITY)
---
* 外觀 (Appearance)
* 滑鼠游標 (Cursor)
* 外框線 (Outline)
* 滑鼠事件 (Pointer Events)
* 調整大小 (Resize)
* 使用者選擇 (User Select)

向量圖 (SVG)
--
* 填滿 (Fill)
* 外框 (Stroke)
* 外框寬度 (Stroke Width)

無障礙 (ACCESSIBILITY)
---
* 螢幕報讀器 (Screen Readers)

官方插件 (OFFICIAL PLUGINS)
--
* Typography
* Forms
* Aspect Ratio
* Line Clamp

<!-- === CSS設定 ============== -->
<style>
a {
color:#0072E3;
text-decoration: none;
transition:color 0.75s;
}
a:hover {
color:#84C1FF;
text-decoration: none;
transition:color 0.75s;
}

</style>