TailwindCSS シリーズ | 點燈坊

General

• TailwindCSS 初體驗
• 為什麼我喜歡 TailwindCSS ?
• 在純 HTML 使用 TailwindCSS
• Vue 2 安裝 TailwindCSS 1
• Vue 2 安裝 TailwindCSS 2.1
• Vue 3 安裝 TailwindCSS 2
• Vue 使用 TailwindUI
• Gridsome 使用 TailwindUI
• Using Vite to Install TailwindCSS
• 使用 Vite 安裝 TailwindUI
• 使用 Vite 安裝 HeadlessUI
• Gridsome 安裝 TailwindCSS
• 使用 TailwindCSS 處理 Global CSS
• TailwindCSS 資源整理
• Sorting TailwindCSS Utilities Automatically with Prettier
• 使用 HTML Attribute Folder 隱藏 Utility

Box Model

• 使用 box-content 設定為 Content Box

Layout

• 使用 overflow- 處理超過父層 Box 顯示
• 使用 container 讓寬度隨 Breakpoint 而變

Flow

• 使用 block 將 Element 轉成 Block
• 使用 inline 將 Element 轉成 Inline
• 使用 inline-block 將 Element 轉成 Inline-block
• 使用 object- 設定 Object Fit
• 使用 m- 設定 Margin
• 使用 p- 設定 Padding
• 使用 mx-auto 水平置中
• 使用 mr-auto 水平靠左
• 使用 ml-auto 水平靠右
• Using block and hidden for Responsive Design

Float

• 使用 float-left 設定文繞圖

Flexbox

• Flexbox Overview
• Using justify-start to Horizontal Left Align
• Using justify-end to Horizontal Right Align
• Using justify-center to Horizontal Center
• Using justify-between to Space out the Horizontal Space
• Using justify-around to Space out the Horizontal Space
• Using justify-evenly to Space out the Horizontal Space
• 使用 flex-wrap 自動換列
• 使用 flex-nowrap 取消自動換列
• 使用 flex-wrap-reverse 自動反向換列
• 使用 flex-row 設定 Main Axis 由左至右排列
• 使用 flex-row-reverse 設定 Main Axis 由右至左排列
• 使用 flex-col 設定 Main Axis 由上至下排列
• 使用 flex-col-reverse 設定 Main Axis 由下至上排列
• 深入探討 items-stretch
• 使用 items-start 在沒有換列下處理 Cross Axis 對齊
• 使用 items-start 在換列下處理 Cross Axis 對齊
• 使用 items-end 在沒有換列下處理 Cross Axis 對齊
• 使用 items-end 在換列下處理 Cross Axis 對齊
• 使用 items-center 在沒有換列下處理 Cross Axis 置中
• 使用 items-center 在換列下處理 Cross Axis 置中
• 使用 items-stretch 在沒有換列下處理 Cross Axis 高度
• 使用 items-stretch 在換列下處理 Cross Axis 高度
• 使用 items-baseline 在沒有換列下處理 Cross Axis 對齊
• 使用 items-baseline 在換列下處理 Cross Axis 對齊
• Flexbox 之 Flex Line
• 使用 content-start 在 Cross Axis 從開始處對齊
• 使用 content-end 在 Cross Axis 從結束處對齊
• 使用 content-center 在 Cross Axis 置中
• 使用 content-center 垂直置中
• items-start 與 content-start 比較
• 使用 content-between 均分 Cross Axis 剩餘高度
• 使用 content-around 均分 Cross Axis 剩餘高度
• 使用 content-evenly 均分 Cross Axis 剩餘高度
• 使用 gap- 設定 Item 間隔
• 使用 space- 設定 Item 間隔
• 使用 order- 改變顯示順序
• 使用 order-first 優先顯示
• 使用 order-last 最後顯示
• 使用 self-start 針對特定 Item 在 Cross Axis 對齊
• 使用 self-end 針對特定 Item 在 Cross Axis 對齊
• 使用 self-center 針對特定 Item 在 Cross Axis 對齊
• 使用 self-stretch 針對特定 Item 在 Cross Axis 對齊
• 使用 flex-grow 分配 Main Axis 剩餘寬度
• 使用 flex-grow 分配子層 Item 寬度
• Using shrink for Controlling How Flex Items Shrink
• 使用 flex-1 在 Main Axis 均分父層 Box
• 使用 inline-flex 使父層成為 Inline
• 使用 m-auto 實現 Flexbox 內垂直置中
• 使用 m-auto 實現同時水平垂直置中
• 使用 m-auto 讓兩個靠左一個靠右
• 使用 m-auto 在 Flexbox 實現不規則 Layout
• 使用 m-auto 實現 justify-around
• 在自動換列內使用 m-auto
• Using basis to Control the Size of Flex Items

Position

• static Overview
• fixed Overview
• Using fixed for Position
• Using fixed for Layout
• absolute Overview
• Using absolute for Scrolling
• Using absolute for Position
• Using absolute for Layout
• relative Overview
• Using relative for Position
• Using relative with Overlap Priority
• Using relative for Layout
• sticky Overview

Grid

• Grid 初體驗
• Grid 使用 grid-cols- 水平均分 Columns
• Grid 使用 grid-rows- 垂直均分 Rows
• Grid 使用 gap- 設定 Item 間距
• Grid 使用 col-start- 與 col-end- 調整 Item 位置
• Grid 使用 row-start- 與 row-end- 調整 Item 位置
• Grid 使用 col-span- 設定 Item 橫跨數
• Grid 使用 row-span- 設定 Item 橫跨數
• Grid 使用 justify-center 水平置中
• Grid 使用 justify-start 水平靠左
• Grid 使用 justify-end 水平靠右
• Grid 使用 justify-between 令 Column 間隔相等
• Grid 使用 justify-around 令 Column 間隔相等
• Grid 使用 justify-evenly 令 Column 間隔相等
• Grid 使用 auto-cols-size 設定 Column 寬度
• Grid 使用 grid-flow-col 自動產生 Column
• 使用 grid-flow-row 自動產生 Row

Sizing

• Using w to Set Width
• Using w-full to set 100% of Parent Width
• Using w-screen to Set Width as Viewport
• Using w-fit for Horizontal Center
• Using w-min to Set the Smallest Width without Overflowing
• Using w-max to Set the Largest Width without Wrapping
• min-w Overview
• Using min-w-fit to Keep Minimum Width as Content Width
• Using h to Set Height
• Using h-screen to Set Hight as Viewport

Typography

• 使用 text- 設定 Font Size
• 使用 font- 設定 Font Weight
• 使用 text- 設定 Text Color
• Using normal-case to Preserve the Original Casing
• Using capitalize to Convert Text to Title-case
• Using lowercase to Convert Text to Lowercase
• Using uppercase to Convert Text to Uppercase
• 使用 truncate 自動依寬度為 String 加上 …
• 使用 vertical-align 垂直排版
• 使用 break-normal 換行但維持單字完整性
• 使用 break-words 自動決定是否換行
• 使用 break-all 根據寬度強制換行
• 使用 placeholder- 設定 Placeholder 顏色
• 使用 placeholder- 設定 Placeholder Opacity
• 實現簡單 List

Background

• 使用 bg- 設定 Background Color
• 自行指定 Background Image

Border

• 使用 rounded- 設定圓角
• 使用 rounded-full 畫圓
• 使用 divide-y 設定 Row 間橫線

Directive

• 使用 @apply 抽出共用 Style

Modifier

Pseudo Class

• Using first to Style the First Row of the List
• Using first-of-type to Style the First Row of the List
• Using last to Style the Last Row of the List
• Using last-of-type to Style the Last Row of the List
• Using odd to Style the Odd Rows of the List
• Using even to Style the Even Rows of the List
• Using hover to Style the Hovered Element
• Using active to Style the Clicked Element
• Using visited to Style the Visited Element
• Using group-hover to Style the Child Element

Pseudo Element

• Using first-line to Style the First Line of the Paragraph
• Using first-letter to Style the First Letter of the Paragraph
• Using before to Decorate the Element
• Using after to Decorate the Element
• Using selection to Style the Selected Text

Function

• 使用 calc() 實現 justify-around
• 使用 calc() 實現固定 Margin 的 RWD
• 使用 calc() 與 box-border 建立 RWD Column

Transform

• 使用 transform 水平置中
• 使用 transform 垂直置中
• 使用 transform 同時水平垂直置中
• Using translate to Move Element

RWD

• 使用 Screen Prefix 根據不同 Device 設定寬度

Cookbook

Layout

• 如何水平置中 ?
• 如何水平靠右 ?
• 如何各自向左右兩側對齊 ?
• 如何同時並存水平置中與水平靠右 ?
• 如何垂直置中 ?
• 如何垂直靠上 ?
• 如何垂直靠下 ?
• 如何同時水平垂直置中 ?
• 如何使 Button 內文字與圖片垂直置中 ?
• 實現滿版背景與水平垂直置中 Slogan
• 如何水平均分 Column ?
• 如何實現常見後台 Layout ?
• Using float for Two Columns Layout
• Using float for Three Columns Layout
• Card with Two Buttons
• Adjusting Text Alignment by the Content
• Making inline-block Horizontal Center

Component

• 實作 Badge
• Simple Button with TailwindCSS
• 實作 Button
• 實作 Card
• 實作 Card 加上 Ribbon
• 實作 CheckBox
• 實作 File Upload
• 改變 li 圖示
• 實作 Modal 蓋板廣告
• 實作 Modal Dialog
• 實作 Progress Bar
• 在文字前後實作 Quote
• 實作 RadioGroup
• 實作 Spinner
• 實作簡易 Toggle
• 實作 Short Toggle
• 實作 Icon Toggle
• 實作可編輯 Treeview
• 實作唯讀 Treeview
• 實作 Treeview Menu
• 實作 Tab
• 實作 Toast Alert
• 實作 Tooltip
• 實作 Textbox
• 在文字下實作紅色 Underline
• 實作圖片灰階效果

Variant

• Using hover Variant in Dark Mode

Modifier

• You might not need before in TailwindCSS
• Using before to Create a Fun Background for an Image
• Using after to Create Required Field

Pug

• 如何在 Pug 使用 Arbitrary Style ?
• 如何在 Pug 使用 Variant ?

Misc

• 如何使 UL + LI 水平顯示 ?
• 為什麼 Tailwind CSS 的圖片底部沒有空隙 ?
• 如何處理 Long Utility List ?