Tailwind CSS 常用語法

版型（Layout）

用於控制元件的佈局、定位與顯示方式。

容器（Container）：
```
<div class="container mx-auto">內容將置中且有最大寬度</div>
```
- container：創建響應式容器，寬度依螢幕大小調整。
- mx-auto：水平置中。
顯示（Display）：
```
<div class="flex">Flex 容器</div>
<div class="grid grid-cols-3">三欄網格</div>
<div class="hidden md:block">小螢幕隱藏，中螢幕顯示</div>
```
- flex：啟用 Flexbox。
- grid：啟用 Grid 佈局。
- hidden / block / inline：控制顯示模式。
- 響應式前綴（如 md:）用於斷點控制。

間距（Spacing）：

Padding（內距）：

<div class="p-4">內距 1rem</div>
<div class="px-4 py-2">水平內距 1rem，垂直內距 0.5rem</div>

Margin（外距）：

<div class="m-4">外距 1rem</div>
<div class="mx-auto mt-2">水平置中，頂部外距 0.5rem</div>

定位（Positioning）：

<div class="relative">相對定位</div>
<div class="absolute top-0 left-0">絕對定位，置於左上角</div>
<div class="fixed bottom-0">固定定位，置於底部</div>

排版（Typography）

控制文字樣式，如字體大小、粗細、對齊等。

文字大小（Font Size）：

<h1 class="text-4xl">超大標題</h1>
<p class="text-base">標準文字</p>
<p class="text-sm">小型文字</p>

text-xs 到 text-9xl：從極小到極大。

字體粗細（Font Weight）：

<p class="font-bold">粗體</p>
<p class="font-normal">標準</p>
<p class="font-light">細體</p>

文字對齊（Text Alignment）：

<p class="text-left">左對齊</p>
<p class="text-center">置中</p>
<p class="text-right">右對齊</p>

行高（Line Height）：

<p class="leading-normal">標準行高</p>
<p class="leading-tight">緊密行高</p>
<p class="leading-loose">寬鬆行高</p>

顏色（Colors）

Tailwind 提供豐富的顏色系統，可用於文字、背景、邊框等。

文字顏色（Text Color）：
```
<p class="text-red-500">紅色文字</p>
<p class="text-blue-700">深藍色文字</p>
```
- 顏色格式：text-{顏色}-{濃度}（如 text-green-300）。

背景顏色（Background Color）：

<div class="bg-gray-200">淺灰色背景</div>
<div class="bg-indigo-600">深靛藍背景</div>

邊框顏色（Border Color）：

<div class="border border-blue-500">藍色邊框</div>

自訂顏色：在 tailwind.config.js 中擴展主題：

theme: {
  extend: {
    colors: {
      'custom-blue': '#1E40AF',
    },
  },
},

使用：

<div class="bg-custom-blue">自訂藍色背景</div>

Flexbox 與 Grid

Flexbox：

<div class="flex flex-row justify-between items-center">
  <div>項目 1</div>
  <div>項目 2</div>
  <div>項目 3</div>
</div>

flex-row / flex-col：設置方向。
justify-between：項目間平均分配空間。
items-center：垂直置中對齊。

Grid：

<div class="grid grid-cols-3 gap-4">
  <div>欄 1</div>
  <div>欄 2</div>
  <div>欄 3</div>
</div>

grid-cols-{n}：設置欄數。
gap-4：欄與欄之間的間距。

響應式設計（Responsive Design）

Tailwind 使用斷點前綴來實現響應式設計，預設斷點如下：

sm：640px
md：768px
lg：1024px
xl：1280px
2xl：1536px

範例：

<div class="text-base md:text-lg lg:text-xl">
  文字在小螢幕為 base，中螢幕為 lg，大螢幕為 xl
</div>

偽類與互動（Pseudo-Classes & Interactivity）

Tailwind 支援偽類（如 :hover、:focus）等互動效果。

Hover 效果：

<button class="bg-blue-500 hover:bg-blue-700 text-white p-4">
  滑鼠懸停變深藍
</button>

Focus 效果：

<input class="border focus:border-blue-500 p-2" type="text" placeholder="點擊我">

其他偽類：

<div class="first:font-bold">第一個子元素粗體</div>
<div class="odd:bg-gray-100">奇數子元素灰色背景</div>

自訂元件（Components）

你可以在 CSS 中定義自訂元件樣式：

@layer components {
  .btn-primary {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
}

使用：

<button class="btn-primary">主要按鈕</button>

版型（Layout）​

排版（Typography）​

顏色（Colors）​

Flexbox 與 Grid​

響應式設計（Responsive Design）​

偽類與互動（Pseudo-Classes & Interactivity）​

自訂元件（Components）​