タグ : TailwindCSS
Grid 使用 row-span- 設定 Item 橫跨數
若 Item 橫跨數個 Row，除了使用 row-start- 與 row-end- 外，也可直接使用 row-span- 設定橫跨數。
Grid 使用 col-span- 設定 Item 橫跨數
若 Item 橫跨數個 Column，除了使用 col-start- 與 col-end- 外，也可直接使用 col-span- 設定橫跨數。
如何在 Pug 使用 Variant ?
Pug 的 Class 名稱不允許特殊字元，但 Tailwind CSS 的 Variant 使用了 :，在 Pug 使用 Variant 則面臨挑戰。
如何在 Pug 使用 Arbitrary Style ?
Arbitrary Style 為 Tailwind CSS 2.1 招牌功能，讓我們不必偶爾為了零碎 CSS 而建立 Class，但在 Pug 使用卻面臨挑戰。
Gridsome 使用 TailwindUI
TailwindUI 基於 TailwindCSS，使用之前須先設定好 TailwindCSS，然後再設定 TailwindUI 的 Plugin。
實作 File Upload
若要上傳檔案，最簡單就是使用 HTML 的 <input type=file>，但 HTML 的 <input> 顯示太過陽春，不太符合目前主流 Web 顯示，當然可以找 Package 達成需求，事實上以 Tailwind CSS 就能簡單實作出漂亮的 File Upload。
使用 Transition 讓 v-if 逐漸變化
當使用 v-if 讓 Element 顯示或消失時，若希望能漸漸變化，Vue 提供了 Transition Component 與相對應 CSS Class，亦可直接搭配 Tailwind CSS。
Gridsome 安裝 Tailwind CSS
Gridsome 基於 Vue，也可以使用 Tailwind CSS，與 Vue CLI 設定上大體類似，只有在 Gridsome Configuration 稍有不同。
Vue 2 安裝 TailwindCSS 2.1
TailwindCSS 2.1 支援 Just-in-Time Compiler，讓我們在 Development 階段也能使用 PurgeCSS 讓 CSS 變小，是 TailwindCSS 很大進步。