
Tailwind 是一個用於網頁開發的 CSS 框架,它提供了一套預先定義好的 CSS 類別,這些類別可以用於快速構建和自定義網頁的外觀和排版。換句話說,使用 Tailwind CSS 框架,開發者無需從頭學習原生的 CSS 語法,而是通過使用直觀且有意義的 CSS 類別,就能夠輕鬆地調整和設置元素的樣式和排版。
Tailwindgen 這個網站則是提供 Columns、Rows 及 Gaps 三個參數快速產生基礎網格後,再讓使用者依據需求使用滑鼠拖曳出想要的網頁布局,而每次調整都能即時產出預覽網格,最後可以產生 JSX 或 HTML Code,直接複製就可以貼到應用 Tailwind CSS 框架的網頁,相當方便。
Tailwindgen 網站資訊
如何使用 Tailwindgen 產生以 Tailwind CSS 框架的網頁布局?
1.進入 Tailwindgen 網站,Columns、Rows 及 Gap 預設分別是 5、5、4。

2.捲動網頁向下就可以看到預覽。

3.將設想好的網頁布局,利用參數先行調整出來,例如三欄式的布局。

4.接下透過滑鼠拖拉 DIV 開始合併,做出網頁所要的框架,並複製所需語法,即可應用。
