Tailwind css [2] 各種好用

2 min readMay 2, 2022

Tailwind css 講求實用優先，為了更好維護，Tailwind 有以下幾個優勢：

Using utility classes to build custom designs without writing CSS

Ｘ）傳統寫一段css，缺點除了要自己花時間想 class 名稱、定義位階、更改順序可能會跑版，並且樣式會一直增加：

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

Ｖ）使用定義直白的 class 直接書寫，雖然冗長，但是簡單明瞭，不需花時間定義名稱、位階、跑版問題，且 Tailwind css 樣式是固定的，會偵測使用的 css 自動加入：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

當然，如果有需重複書寫的組件，也可以使用 @apply 功能：

<!-- html -->
<button class="btn-primary">
  Save changes
</button><!-- css -->
@tailwind base;
@tailwind components;
@tailwind utilities;@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold;
  }
}

不要為了讓 html 看起來乾淨就使用 @apply 功能。

因為是本末倒置的，缺點是：一樣要花時間想名稱，必須在多個文件之間跳轉才能進行更改，CSS 包會更大。

2. Handling Hover, Focus, and Other States
個別處理偽類或偽元素

Ｘ）傳統的書寫是單個類名會根據當前狀態執行不同的操作

<button class="btn-primary">
  Save changes
</button>.btn-primary {
  background-color: #0ea5e9;
}
.btn-primary:hover {
  background-color: #0369a1;
}

Ｖ）Tailwind css 可以個別處理狀態，不需綁定一種樣式

<button class="bg-sky-500 hover:bg-sky-700">
  Save changes
</button>.bg-sky-500 {
  background-color: #0ea5e9;
}
.hover\:bg-sky-700:hover {
  background-color: #0369a1;
}

還有很多不同的處理狀態的方式，例如 form表單樣式、group 使用方法、peer 使用方法、Before and after、List 樣式，等等各種書寫方式，都可以簡便的在 html 直接呈現，不用花時間命名或不同人在維護上的困難。

3. Responsive Design
響應式設計

Tailwind css目前v3.0.24版本的Responsive Design共分成下列幾個斷點：

sm — @media (min-width: 640px) { ... }
md — @media (min-width: 768px) { ... } lg — @media (min-width: 1024px) { ... } xl — @media (min-width: 1280px) { ... } 2xl — @media (min-width: 1536px) { ... }

只要將要設定的css前方加入斷點+冒號，以下範例：

<img class="w-16 md:w-32 lg:w-48" src="...">

w-16 的意思是，在任何螢幕寬度時，這張圖片寬度是16(4rem)；
md:w-32 的意思是，在螢幕寬度768px以上的時候，寬度是32(8rem)；
lg:w-48的意思是，在螢幕寬度1024px以上的時候，寬度是48(12rem)。

Responsive Design 的使用非常廣泛，不管是高寬度、顏色、對齊、flex排版，皆可以使用此方法進行各種螢幕寬度的調用。

如果對於預設定義的名稱或寬度不滿意，當然可以自定義斷點(更多設定)，只需在tailwind.config.js 中修改：

module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }      'md': '768px',
      // => @media (min-width: 768px) { ... }      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

4. group 和 peer 的使用

group
當需要根據父元素的狀態設置子元素的樣式時，在父元素使用 “.group”，並在子元素使用 “.group-hover:”、“.group-focus:”、“.group-active:”…等偽元素來設置子元素的樣式。

當我的滑鼠在<a>父元素hover的時候，<h3>子元素的文字顏色會變成白色，如範例：

<a href="#" class="group">
  <h3 class="group-hover:text-white">文字文字文字</h3>
</a>

peer
當需要根據兄弟元素(同層元素)的狀態設置元素的樣式時，在兄元素使用“.peer”，並在弟元素使用 “.peer-required:”、“.peer-focus:”、“.peer-disabled:”、“.peer-invalid:”…等來設置弟元素的樣式。

當我在輸入<input>兄元素的時候，<p>弟元素判斷格式是否正確，如果正確就隱藏，錯誤就顯示，如範例：

<input type="email" class="peer"/>
<p class="invisible peer-invalid:visible">請輸入正確的email格式</p>

注意：“.peer”只能使用在兄元素，也就是要設置效果的弟元素的前個元素。

5. First, last, odd, and even 的使用

first and last
在表元素中使用“first:”，那列表的 first-child 元素就會產生指定樣式。
在表元素中使用“last:”，那列表的 last-child 元素就會產生指定樣式。

範例：
在表元素的第一個元素padding-top:0，就使用“first:pt-0”；最後一個元素padding-bottom:0，就使用“last:pb-0”

<ul role="list">
  {#each people as person}
    <li class="first:pt-0 last:pb-0">
      <img src="{person.imageUrl}" alt="" />
      <div>
        <p>{person.name}</p>
        <p>{person.email}</p>
      </div>
    </li>
  {/each}
</ul>

odd, and even
在表元素中使用“odd:”，那列表的“奇數”元素就會產生指定樣式。
在表元素中使用“even:”，那列表的“偶數”元素就會產生指定樣式。

範例：
在表元素的奇數元素背景為白色，就使用“odd:bg-white”；偶數元素背景為淺藍色，就使用“even:bg-slate-100”

<table>
  <tbody>
    {#each people as person}
      <tr class="odd:bg-white even:bg-slate-100">
        <td>{person.name}</td>
        <td>{person.title}</td>
        <td>{person.email}</td>
      </tr>
    {/each}
  </tbody>
</table>

以上是我覺得在 Tailwind css 中實用性高又好用的功能，有發現更多好用的會再補充！

Tailwind css [2] 各種好用

Written by Abby 旦旦

No responses yet