TailwindCSS - HackMD

# TailwindCSS comment: flex 的介紹幫我附上圖片 ## Padding/Margin 在 Tailwind 中，使用 `p` 和 `m` 的縮寫來表示 CSS 的 `padding` 和 `margin`，使用 `t`, `r`, `b`, `l` 來表示 `top`, `right`, `bottom` 和 `left`，使用 `x` 和 `y` 來表示 `inline` 和 `block`。 - CSS ```css= body { margin-block: 0.75rem; padding-left: 2rem; } .h1 { margin-inline: 1.25rem; } ``` - Tailwind ```htmlembedded= <body class='my-3 pl-8'> <h1 class='mx-5'> </h1> </body> ``` Tailwind 注重樣板的一致性，因此會看到 `mb-6` 或 `py-10` 等使用 `-` 後接著一個數字的寫法，至於這些數字所代表的大小，在 vscode 中可以將鼠標放置在該元素上，即會顯示該 Tailwind 所代表的 CSS style，通常為 `rem`： ![截圖 2024-09-24 下午1.53.39](https://hackmd.io/_uploads/Skwx4AJCR.png =60%x) ## Border - CSS ```css= body { border: 1px solid red; border-radius: 8px; } ``` - Tailwind ```html= <body class='border border-solid border-red-400 rounded-xl'> </body> ``` ## Layout - CSS ```css= body { display: flex; justify-content: center; align-items: center margin: 2rem; padding-inline: 3rem; } ``` ```html= <body class='flex justify-center items-center m-2 px-3'> </body> ``` ## RWD ### Tailwind CSS 簡介 **響應式網頁設計**（RWD）旨在根據不同設備的屏幕尺寸自動調整頁面佈局，如手機、平板、桌面等。 ### 1. Tailwind CSS 的響應式設計基礎 #### 1.1 響應式設計的概念 - **響應式設計** 是指網頁根據設備的屏幕尺寸自動調整布局和樣式，從而提升用戶體驗。 #### 1.2 Tailwind CSS 的響應式斷點 Tailwind CSS 提供預設的響應式斷點類別： - `sm`: 最小寬度 640px - `md`: 最小寬度 768px - `lg`: 最小寬度 1024px - `xl`: 最小寬度 1280px - `2xl`: 最小寬度 1536px #### 1.3 使用 Tailwind CSS 的響應式類別 - 根據不同屏幕尺寸應用樣式： ```html <div class="sm:bg-blue-500 md:bg-red-500 lg:bg-green-500"> 響應式背景顏色範例 </div> ``` ![2024-10-0511.50.11-ezgif.com-video-to-gif-converter](https://hackmd.io/_uploads/S1tGZ1Jyyg.gif) * 作圖 ![IMG_0841](https://hackmd.io/_uploads/Hk-MhC0AC.jpg =70%x) ### 2. Tailwind CSS 的響應式排版和布局 #### 2.1 彈性布局與網格布局 * Flex 根據需要放大和縮小，忽略其初始尺寸 | 屬性 | 描述 | 圖示 | |---------------------|----------------------------------------------------|------------| | **flex-1** | 考慮到其初始大小的情況下放大和縮小 |![截圖 2024-10-07 晚上9.51.51](https://hackmd.io/_uploads/Sy8FwDWyJl.png)| | **flex-auto** | 初始尺寸的情況下縮小但不放大 |![截圖 2024-10-07 晚上9.52.14](https://hackmd.io/_uploads/SyriwDbJyg.png)| | **flex-initial** | 阻止一個 flex 項目的放大和縮小 |![截圖 2024-10-07 晚上9.51.07](https://hackmd.io/_uploads/SkgPvwbyye.png)| | **flex-none** | 阻止任何 flex 行為 |![截圖 2024-10-07 晚上9.52.51](https://hackmd.io/_uploads/ByG6DPWJ1g.png)| | **flex-row** | 將 flex 方向設置為橫向 (row) | ![flex-row](https://hackmd.io/_uploads/SyQ18DbkJg.png) | | **flex-row-reverse**| 將 flex 方向設置為橫向反向 (row-reverse) | ![flex-row-reverse](https://hackmd.io/_uploads/r1yxLvbkJx.png) | | **flex-col** | 將 flex 方向設置為縱向 (column) | ![flex-col](https://hackmd.io/_uploads/BynrIvbJke.png) | | **flex-col-reverse**| 將 flex 方向設置為縱向反向 (column-reverse) | ![flex-col-reverse](https://hackmd.io/_uploads/H1FDIwZJJl.png) | | **flex-nowrap** | 不換行 | ![flex-nowrap](https://hackmd.io/_uploads/rkBtUvZ1yl.png) | | **flex-wrap** | 自動換行 | ![flex-wrap](https://hackmd.io/_uploads/HkvcLv-1Jg.png) | | **flex-wrap-reverse**| 反向換行 | ![flex-wrap-reverse](https://hackmd.io/_uploads/BkujLwbyyg.png) | | **flex-grow**|允許一個項目放大，以填充任何可用空間 |![螢幕錄影 2024-10-07 晚上9.56.43-2](https://hackmd.io/_uploads/H1NehDZyyg.gif)| | **flex-grow-0**|阻止一個項目放大|![螢幕錄影 2024-10-07 晚上10.12.34-2](https://hackmd.io/_uploads/BJCOAwWyJl.gif)| | **flex-shrink**|允許在必要時縮小|![螢幕錄影 2024-10-07 晚上10.06.11](https://hackmd.io/_uploads/SkUWpvWy1x.gif)| | **flex-shrink-0**|阻止縮小|![螢幕錄影 2024-10-07 晚上10.06.30](https://hackmd.io/_uploads/BkyD6D-yJl.gif)| * Flexbox： ```html <div class="flex flex-wrap justify-between"> <div class="p-4">Item 1</div> <div class="p-4">Item 2</div> <div class="p-4">Item 3</div> </div> ``` ![y5zvGxf](https://hackmd.io/_uploads/Sy4t0RACC.png) * Grid : ```html <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="p-4">Item 1</div> <div class="p-4">Item 2</div> <div class="p-4">Item 3</div> </div> ``` #### 2.2 響應式間距與邊距 * 使用 Tailwind 控制元素間距和邊距 ```html <div class="p-4 sm:p-6 md:p-8"> 響應式間距範例 </div> ``` ### 3. Tailwind CSS 的響應式設計實例 #### 3.1 實例 1：響應式導航欄 ```html <nav class="bg-gray-800 p-4 sm:p-6 md:p-8"> <ul class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4"> <li><a href="#" class="text-white">Home</a></li> <li><a href="#" class="text-white">About</a></li> <li><a href="#" class="text-white">Services</a></li> </ul> </nav> ``` #### 3.2 實例 2：響應式網格布局 ```html <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <div class="bg-blue-500 p-4">欄位 1</div> <div class="bg-red-500 p-4">欄位 2</div> <div class="bg-green-500 p-4">欄位 3</div> </div> ``` --- - Contributor: Ateto