タグ : TailwindCSS
TailwindCSS 資源整理
TailwindCSS 已漸漸有自己 Community，本文搜集以 TailwindCSS 所建立的 Component、Template 與 Layout。
使用 space- 設定 Item 間隔
雖然可以使用 gap 設定子層 item 間隔，但事實上 gap 目前只能在 Chrome 與 Firefox 正常執行，Safari 則尚未支援，但 space- 可在所有 Browser 都正常執行。
使用 flex-1 在 Main Axis 均分父層 Box
flex: 1 可一次設定 flex: 1 0 0，是在子層 Item 在 Main Axis 均分父層 Box 最精簡寫法。
使用 container 讓寬度隨 Breakpoint 而變
固然可以對 width 設定百分比實現 RWD，但這樣會隨著 Browser 改變動態改變父層 Box 寬度；若想寬度隨 Breakpoint 而變，剩下都給 Margin，則可使用 Tailwind CSS 的 container。
使用 self-stretch 針對特定 Item 在 Cross Axis 對齊
若在父層 Box 並不是設定 items-stretch，可使用 self-stretch 在特定子層 Item 設定成 items-stretch。
使用 self-center 針對特定 Item 在 Cross Axis 對齊
items-center 是在父層 Box 設定，會影響所有子層 Item，若想只設定特定子層 Item 的 items-center 設定，或者在某子層 Item 覆蓋父層 Box 的 items-center 設定，則可使用 self-center。
使用 self-end 針對特定 Item 在 Cross Axis 對齊
items-end 是在父層 Box 設定，會影響所有子層 Item，若想只設定特定子層 Item 的 items-end 設定，或者在某子層 Item 覆蓋父層 Box 的 items-end 設定，則可使用 self-end。
使用 self-start 針對特定 Item 在 Cross Axis 對齊
items-start 是在父層 Box 設定，會影響所有子層 Item，若想只設定特定子層 Item 的 items-start 設定，或者在某子層 Item 覆蓋父層 Box 的 items-start 設定，則可使用 self-start。
使用 content-evenly 均分 Cross Axis 剩餘高度
若希望 Browser 能自動均分父層 Box 在 Cross Axis 剩餘高度，可使用 content-evenly 設定。
使用 content-around 均分 Cross Axis 剩餘高度
若希望 Browser 能自動均分父層 Box 在 Cross Axis 剩餘高度，可使用 content-around 設定。
使用 content-between 均分 Cross Axis 剩餘高度
若希望 Browser 能自動均分父層 Box 在 Cross Axis 剩餘高度，可使用 content-between 設定。
使用 inline-flex 使父層成為 Inline
flex 與 inline-flex 對其子層 Item 都能使用 Flexbox，但對父層 Box 本身處理則不同，flex 會維持 Block，而 inline-flex 會成為 Inline。
items-start 與 content-start 比較
Flexbox 的 items-start 與 content-start 非常類似，都是在處理 Cross Axis 對齊，事實上兩者並不違背，還可一起使用。
使用 content-start 在 Cross Axis 從開始處對齊
若要使 Flex Line 對 Box 從 Cross Axis 開始處 對齊，可使用 content-start。