Tailwind CSS 實用技巧：提升開發效率

為什麼選擇 Tailwind CSS？

Tailwind CSS 是一個實用優先的 CSS 框架，與傳統 CSS 框架不同，它提供底層的工具類，讓你直接在 HTML 中編寫樣式。

技巧一：使用 @apply 提取重複樣式

當多個元素共享一組相同的工具類時，可以用 `@apply` 提取。

技巧二：善用 group 和 peer

**group** 允許父元素狀態影響子元素：

<div class="group">

<p class="group-hover:text-indigo-600">鼠標懸停父元素時變色</p>

</div>

技巧三：響應式設計

Tailwind 的響應式前綴非常直觀：

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">

手機1列，平板2列，桌面3列

</div>