---
# System prepended metadata

title: TailwindCSS
tags: [docs]

---

# 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