タグ : TailwindCSS
使用 object- 設定 Object Fit
若圖片由 API 以 Base64 String 傳回且圖片大小不一，此時 Front-end 為了美觀必須在不改變原圖比例下有相同長寬，此時可使用 Tailwind CSS 的 Object Fit 與 Object Position 完成。
使用 box-content 設定為 Content Box
Vallina CSS 預設 box-sizing 為 context-box，但 Tailwind CSS 預設為 border-box，需特別使用 box-content 才能設定為 content-box。
使用 inline-block 將 Element 轉成 Inline-block
HTML 將 Element 分成 Inline、Block 與 Inline-block，透過 inline-block 可將 Inline 或 Block 強制轉成 Inline-block。
使用 inline 將 Element 轉成 Inline
HTML 將 Element 分成 Inline、Block 與 Inline-block，透過 inline 可將 Block 強制轉成 Inline。
使用 block 將 Element 轉成 Block
HTML 將 Element 分成 Inline、Block 與 Inline-block，透過 block 可將 Inline 強制轉成 Block。
使用 float-left 設定文繞圖
文繞圖為實務上常見需求，若只使用 <img> 與 <div>，則 <img> 與 <div> 會各自一行顯示，可使用 Tailwind CSS 對 <img>設定 float-left 達成文繞圖。
使用 vertical-align 垂直排版
當多個不同高度的 inline 或 inline-block 水平並列時，可由 vertical-align 指定各 Element 該如何垂直對齊。
使用 items-center 在 Cross Axis 置中
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度，若也需同時對 Cross Axis 置中時，可使用 items-center 達成。
Tailwind CSS 與 Class Binding
Tailwind 的 Utility 其實就是一堆預先定義好的 CSS Class，若要能根據 State 動態改變 Utility 使其 Reactive，就要使用 Vue 的 Class Binding。
為什麼 Tailwind CSS 的圖片底部沒有空隙 ?
<img> 因為預設 vertical-align: baseline，在 HTML 5 會造成圖片與 Item 底部有些空隙，但這在 Tailwind CSS 卻不會出現，到底 Tailwind CSS 有什麼黑魔法呢 ?
使用 @apply 抽出共用 Style
很多人對於 Tailwind CSS 誤解在於 Utility 都寫在 HTML，很難重複使用 Style，Tailwind CSS 另外提供了 @apply directive 專門處理此問題。
Vue 3 安裝 TailwindCSS 2
TailwindCSS 基於 Functional CSS，讓我們只要組合 Utility 就能達成效果，不必再寫 CSS，且搭配 PurgeCSS 後，還可將沒用到的 CSS 拿掉。
Vue 2 安裝 TailwindCSS 1
TailwindCSS 基於 Functional CSS，讓我們只要組合 Utility 就能達成效果，不必再寫 CSS，且搭配 PurgeCSS 後，還可將沒用到的 CSS 拿掉。
如何使 UL + LI 水平顯示 ?
UL 與 LI 預設會垂直顯示，但實務上卻常常使用 UL 與 LI 製作水平 Menu，可使用 flex 或 inline 使 UL 與 LI 水平顯示。
當 Component 遇見 Functional CSS
很多人對於 Functional CSS 直覺印象就是 HTML 會帶一堆 CSS Class，事實上當 Component 觀念出現後，由於 Prop 也能用在 CSS，因此 CSS 就有了新的用法。
使用 TailwindCSS 處理 Global CSS
雖然在 Vue 儘量在 Component 內使用 Scoped CSS 避免 CSS 互相影響，但若各 Component 都套用，還是無法避免使用 Global CSS，原本 Vue 有多種方式使用 Global CSS，若使用 TailwindCSS 則有不同方式。
為什麼不該使用 ID Selector ?
常聽前輩說盡量少用 ID Selector，這會導致日後維護困難，本文以 Functional CSS 角度，解釋為什麼不該使用 ID Selector。
TailwindCSS 初體驗
TailwindCSS 特色是讓你不用寫 CSS，只要藉由組合 Utility Class 就能對 HTML Element 做 Styling，如此在 HTML 就可得知結果，不用在糾結於複雜的 CSS Selector Rules，也不用擔心 Precedence 而無法修改 Style。