タグ : TailwindCSS
使用 items-baseline 在換列下處理 Cross Axis 對齊
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度且 Item 有換列，若也需同時對 Cross Axis 從 Content 上沿對齊，可使用 items-baseline 達成。
使用 items-stretch 在換列下處理 Cross Axis 高度
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度且 Item 有換列，若也需同時達成 Item 高度與外層 <div> 同高，可使用 items-stretch 達成。
使用 items-baseline 在沒有換列下處理 Cross Axis 對齊
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度，若也需同時對 Cross Axis 從 Content 上沿對齊，可使用 items-baseline 達成。
使用 items-stretch 在沒有換列下處理 Cross Axis 高度
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度，且 Item 並沒有設定高度，可用 items-stretch 達成 Item 高度與外層 <div> 同高。
使用 items-center 在換列下處理 Cross Axis 置中
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度且 Item 有換列，若也需同時對 Cross Axis 置中時，可使用 items-center 達成。
使用 items-end 在換列下處理 Cross Axis 對齊
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度且 Item 有換列，若也需同時對 Cross Axis 結束處對齊時，可使用 items-end 達成。
使用 items-start 在換列下處理 Cross Axis 對齊
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度且 Item 有換列，若也需同時對 Cross Axis 開始處對齊時，可使用 items-start 達成。
使用 items-center 在沒有換列下處理 Cross Axis 置中
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度，若也需同時對 Cross Axis 置中時，可使用 items-center 達成。
使用 items-end 在沒有換列下處理 Cross Axis 對齊
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度且 Item 沒有換列，若也需同時對 Cross Axis 結束處對齊時，可使用 items-end 達成。
使用 items-start 在沒有換列下處理 Cross Axis 對齊
實務上除了在 Main Axis 方向對齊外，若外層 <div> 有高度且 Item 沒有換列，若也需同時對 Cross Axis 開始處對齊時，可使用 items-start 達成。
使用 flex-col-reverse 設定 Main Axis 由下至上排列
Flexbox 雖然看起來使 Block 從垂直排列變成水平排列，事實上可由 flex-col-reverse 決定 Main Axis 為垂直排列且由下至上。
使用 flex-col 設定 Main Axis 由上至下排列
Flexbox 雖然看起來使 Block 從垂直排列變成水平排列，事實上可由 flex-col 決定 Main Axis 為垂直排列且由上至下。
使用 flex-row-reverse 設定 Main Axis 由右至左排列
Flexbox 雖然看起來使 Block 從垂直排列變成水平排列，事實上還可由 flex-row-reverse 決定 Main Axis 排列方向。
使用 flex-row 設定 Main Axis 由左至右排列
Flexbox 雖然看起來使 Block 從垂直排列變成水平排列，事實上是由 flex-row 決定 Main Axis 排列方向。
使用 flex-wrap-reverse 自動反向換列
實務上若想 Item 在 Main Axis 方向總寬度大於外層時就自動反向換列，可使用 flex-wrap-reverse 達成。
使用 placeholder- 設定 Placeholder Opacity
若要改變 TextBox 的 Placeholder Opacity，可使用 placeholder- 系列 Utility。
Vue 使用 Tailwind UI
Tailwind UI 基於 Tailwind CSS，使用之前須先設定好 Tailwind CSS，然後再設定 Tailwind UI 的 Plugin。
使用 truncate 自動依寬度為 String 加上 ...
由 API 所回傳的資料可能過長而換行顯示，但有時我們不希望換行影響版面，而想直接在該行截斷 String 加上 ... 即可，當然可以使用 JavaScript 處理，但隨著 RWD 寬度改變，JavaScript 將面臨挑戰，比較好的方式是使用 CSS 解決。
使用 Screen Prefix 根據不同 Device 設定寬度
使用 Tailwind CSS 的 Screen Prefix，我們可根據 iPhone、iPad、iPad Pro、MacBook Air 與 iMac 分別設定不同 Column Width。
使用 calc() 實現固定 Margin 的 RWD
為了實現 RWD，我們會將 width 與 margin 都改用 % 而非 px，但這會造成 margin 隨 Browser 寬度改變，若要 margin 固定而 width 依舊使用 %，則要借數 calc() 根據固定 margin 動態計算 width。
使用 calc() 實現 justify-around
若不換行，justify-around 可使 Item 之間間隔相等，但若搭配 flex-wrap 換行，如果 Item 個數無法整除，會出現間隔不相等，可使用 calc() 自行處理間隔。
使用 calc() 與 box-border 建立 RWD Column
若要建立可 RWD 的 Layout，也可藉由 calc() 與 box-border 先建立 Column，最後再將 Item 放進 Column 內。
使用 m-auto 實現同時水平垂直置中
若要同時水平置中與垂直置中，直覺會同時使用 justify-center 與 aligns-center，事實上也可巧妙地使用 margin: auto 實現。
使用 m-auto 實現 Flexbox 內垂直置中
若要在 Flexbox 內實現 Cross Axis 置中，直覺會使用 items-center，事實上也可巧妙地使用 m-auto 實現。