# [Tailwind] modifiers 修飾符

###### tags: `Tailwind`

* [Pseudo-classes 偽類](#Pseudo-classes-偽類)
* 狀態：`hover`、`active`、`focus`、`focus-within`、`focus-visible`
* 連結：`visited`、`target`
* 子元素
* `*`、`has`、`empty`
* `first`、`last`、`only`、`odd`、`even`
* `first-of-type`、`last-of-type`、`only-of-type`
* `input` 元素
* `disabled`、`enabled`
* `valid`、`invalid`
* `required`、`read-only`
* `placeholder-shown`、`autofill`
* `type` 為 `checkbox` 或 `radio` ：`checked`、`indeterminate`
* `type` 為 `checkbox` 或 `radio` 或 `option`：`default`
* 有 `min` 或 `max` 屬性時：`in-range`、`out-of-range`
* Pseudo-elements 偽元素
* `before`、`after`
* 首字母和首行：`first-letter`、`first-line`
* 選取的文字：`selection`
* `ul`、`ol`、`li` 元素：`marker`
* `input`、`textarea` 元素：`placeholder`
* `<input type="file">` 元素：`file`
* `dialog` 元素：`backdrop`
* Media and feature queries 媒體和功能查詢
* [響應式斷點](https://hackmd.io/@yuna9068/SyBeunzRp#screens)
* `sm`、`md`、`lg`、`xl`、`2xl`、`min-[…]`
* `max-sm`、`max-md`、`max-lg`、`max-xl`、`max-2xl`、`max-[…]`
* 深色模式：`dark`
* viewport 方向：`portrait`、`landscape`
* 使用者是否開啟減少不必要的動畫：`motion-safe` 未修改、`motion-reduce` 啟用
* 對比度：`contrast-more`、`contrast-less`
* 強制顏色模式：`forced-colors`
* 列印：`print`
* 瀏覽器是否支援某個屬性：`supports-[...]`
* Attribute selectors 屬性選擇器：
* ARIA：`aria-busy`、`aria-checked`、`aria-disabled`、`aria-expanded`、`aria-hidden`、`aria-pressed`、`aria-readonly`、`aria-required`、`aria-selected`、`aria-[…]`、`group-aria-*`、`peer-aria-*`
* Data：`data-[…]`
* RTL：`rtl`、`ltr`
* `details`、`dialog` 元素：`open`
* [Custom modifiers 自定義修飾符](https://tailwindcss.com/docs/hover-focus-and-other-states#custom-modifiers "Tailwind CSS v3 官方文件")

## Pseudo-classes 偽類
### 根據父元素狀態設定樣式
* 父元素加上 `group`
* 子元素使用 `group-*` 設定樣式，`*` 為偽類

<a href="#" class="block p-6 group">
  <p class="text-slate-500 group-hover:text-white">a hover 時，p 的文字顏色會變成白色</p>
</a>

#### 巢狀分組
* 父元素使用 `group/{name}` 設定群組名稱
* 子元素使用 `group-*/{name}` 設定樣式

<ul role="list">
  <li class="group/item hover:bg-red-300">
    <div>
      <p>li hover 時，li 背景色會變成紅色，a 會顯示在畫面上</p>
    </div>
    <a class="group/edit invisible hover:bg-green-300 group-hover/item:visible" href="#">
      這裡是 a。
      <span class="group-hover/edit:text-blue-500">a hover 時，a 背景色會變成綠色，span 文字顏色會變成藍色</span>
    </a>
  </li>
</ul>

### 根據同層級元素狀態設定樣式
* 同層級元素加上 `peer`，同層級元素必須要出現在目標元素前
* 目標元素使用 `peer-*` 設定樣式，`*` 為偽類

<form>
  <label class="block">
    <span>Email</span>
    <input type="email" class="peer border"/>
    <p class="invisible peer-invalid:visible text-red-600">
      有 peer class 的 input 元素未通過驗證時顯示
    </p>
  </label>
</form>

#### 分組
* 同層級元素使用 `peer/{name}` 設定群組名稱
* 目標元素使用 `peer-*/{name}` 設定樣式

<fieldset>
  <legend>Published status</legend>

  <input id="draft" class="peer/draft" type="radio" name="status" checked />
  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>

  <input id="published" class="peer/published" type="radio" name="status" />
  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">Drafts are only visible to administrators.</div>
  <div class="hidden peer-checked/published:block">Your post will be publicly visible on your site.</div>
</fieldset>

### 設定下一層子元素樣式
* 父元素使用 `*` 設定下一層子元素的樣式
* 子元素若設定相同樣式無效，會以父元素設定的為主

<ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:p-3 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10">
  <li class="bg-red-500">Sales - 背景色以父元素設定的為主，會是 bg-sky-50</li>
  <li>Marketing</li>
  <li>SEO</li>
</ul>

### 根據後代元素設定樣式
* 父元素使用 `has-*` 設定樣式，`*` 為偽類或元素標籤

<label class="has-[:checked]:bg-blue-50 has-[:checked]:text-blue-900">
  Google Pay - input 被選取時，背景及文字顏色會變成藍色
  <input type="radio" class="checked:border-blue-500" name="pay" />
</label>

#### 根據父元素的後代元素
* 父元素加上 `group`
* 目標元素使用 `group-has-*` 設定樣式，`*` 為偽類或元素標籤

<div class="group mb-6">
  <h4>Spencer Sharp</h4>
  <p class="hidden group-has-[a]:block">這裡的 p 會顯示在畫面上</p>
  <p>Product Designer at <a href="#">planeteria.tech</a></p>
</div>
<div class="group">
  <h4>Casey Jordan</h4>
  <p class="hidden group-has-[a]:block">這裡的 p 不會顯示</p>
  <p>Just happy to be here.</p>
</div>

#### 根據同層級元素的後代元素
* 同層級元素加上 `peer`，同層級元素必須要出現在目標元素前
* 目標元素使用 `peer-has-*` 設定樣式，`*` 為偽類或元素標籤

<div>
  <label class="peer">
    <input type="checkbox" name="todo[1]" checked />
    勾選時下排文字顏色會變成紅色
  </label>
  <p class="peer-has-[:checked]:text-red-500">Text</p>
</div>

## 參考資料
* [Tailwind CSS v3 官方文件：Pseudo-classes](https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes "Handling Hover, Focus, and Other States - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Pseudo-elements](https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-elements "Handling Hover, Focus, and Other States - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Media and feature queries](https://tailwindcss.com/docs/hover-focus-and-other-states#media-and-feature-queries "Handling Hover, Focus, and Other States - Tailwind CSS")
* [Tailwind CSS v3 官方文件：Attribute selectors](https://tailwindcss.com/docs/hover-focus-and-other-states#attribute-selectors "Handling Hover, Focus, and Other States - Tailwind CSS")

---

:::info
建立日期：2024-03-14
更新日期：2024-03-21
:::