Tailwind CSS框架學習筆記

Tailwind 筆記

• Tailwind官網說明書

外留白 margin 和內留白 padding：

• mx （margin-x 軸）
• my （margin-y 軸）
• py （padding-y 軸）
• px （padding-x 軸）

RWD 容器

• container（有寬度上限的容器）

RWD 邏輯

RWD 設計是窄的優先（mobile first）。

例如，如果寫：

md:mx-auto

在 md、lg、xl、2xl 都會套用 mx-auto，除非更寬的部分有另外宣告其他的 margin 值。

文字：

• text-center　置中
• text-left　置左
• text-xl　大字
• text-blue-800　藍字

RWD 寬度表：

• sm 約為手機寬度（註：Tailwind 無 xs）
• md 約為平板寬度
• lg 約為筆電寬度
• xl 約為桌電寬度
• 2xl 約為大螢幕寬度

例如，如果寫：

flex flex-col md:flex-row

會在 sm 以下為直排（flex column），md 以上為橫排（flex row）。

網頁學習資源(CSS基礎)：

0. Flexbox: https://www.w3schools.com/css/css3_flexbox.asp

影音學習資源(CSS基礎)：

0. Flexbox(英文發音, 15min): https://www.youtube.com/watch?v=fYq5PXgSsbE

影音學習資源(Tailwind基礎)：

1. Tailwinda簡介(中文發音, 27min)：https://www.youtube.com/watch?v=HYQ0SzWHM7I