Handling Hover, Focus, and Other States 處理懸停、焦點和其他狀態(tài)

Tailwind 包含幾乎所有你需要的修改器：

• 偽類，比如 :hover、:focus、:required
• 偽元素，比如：::before、::after
• 媒體和功能查詢，比如: md:
• 屬性選擇器，比如：[dir="rtl"] 和 [open]

比如這樣寫

<button class="dark:md:hover:bg-fuchsia-600 ...">
  Save changes
</button>

表示 在黑暗模式下、在中等斷點處、懸停時更改背景顏色

官方的第二篇文檔告訴我們
本指南將了解框架中可用的每個修飾符，如何將它們與您自己的自定義類一起使用，甚至如何創(chuàng)建您自己的修飾符

hover、focus、and active

略

First、last、odd、and even

<table>
  <!-- ... -->
  <tbody>
    {#each people as person}
      <!-- Use a white background for odd rows, and slate-50 for even rows -->
      <tr class="odd:bg-white even:bg-slate-50">
        <td>{person.name}</td>
        <td>{person.title}</td>
        <td>{person.email}</td>
      </tr>
    {/each}
  </tbody>
</table>

Form states

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Username</span>
    <!-- Using form state modifiers, the classes can be identical for every input -->
    <input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
      focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
      disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
      invalid:border-pink-500 invalid:text-pink-600
      focus:invalid:border-pink-500 focus:invalid:ring-pink-500
    "/>
  </label>
  <!-- ... -->
</form>

基于父狀態(tài)的樣式

需要給父組件標記一個group，然后子組件用group-*來使用樣式
如

<a href="#" class="group">
  <div class="">
    <svg class="group-hover:stroke-white" fill="none" viewBox="0 0 24 24"></svg>
    <h3 class="group-hover:text-white ">New project</h3>
  </div>
  <p class="group-hover:text-white">Create a new project from a variety of starting templates.</p>
</a>

如果有多層嵌套，則需要使用group/{name}的形式來區(qū)分，如

<ul role="list">
  {#each people as person}
    <li class="group/item hover:bg-slate-100 ...">
      <div>
       ...
      </div>
      <a class="group/edit hover:bg-slate-200 group-hover/item:visible ...">
        <span class="group-hover/edit:text-gray-700 ...">Call</span>
        <svg class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ...">
          <!-- ... -->
        </svg>
      </a>
    </li>
  {/each}
</ul>

也可以使用選擇器，如

<div class="group is-published">
  <div class="hidden group-[.is-published]:block">
    Published
  </div>
</div>

基于兄弟元素

關(guān)鍵詞peer，用法和group一樣，但是，peer-*只對該元素前，標記有peer的有效
比如：

<div class="peer-hover:text-white" />
<div class="peer" />

這種將peer放在后面的是不會生效的

直接子級的控制

關(guān)鍵詞*，用在父元素上，比如

<div>
  <h2>Categories<h2>
  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
    <li>Sales</li>
    <li>Marketing</li>
    <li>SEO</li>
    <!-- ... -->
  </ul>
</div>

但是需要注意，如果父元素使用了 *:*，那么在子元素上單獨設(shè)置 Tailwind 是不被允許的

后代的控制

關(guān)鍵詞hax-*，用法同group
可以組合使用，如group-has-* 或者 peer-has-*

Before and after

<label class="block">
  <span class="after:content-['*'] after:ml-0.5 after:text-red-500 ">
    Email
  </span>
  <input type="email" name="email" class="" placeholder="you@example.com" />
</label>

圖例

Placeholder text

關(guān)鍵詞placeholder:*，快捷設(shè)置input的placeholder樣式

Marker

關(guān)鍵詞marker:*，快捷設(shè)置有序列表或者無序列表的標點樣式，可以給ul或ol用，作用于全體li

Highlighted text

關(guān)鍵詞selection:*，作用于選中文本后的樣式，可繼承并應(yīng)用于后代元素

First-line and first-letter

關(guān)鍵詞first-line，修飾文本第一行的樣式
關(guān)鍵詞first-letter，修飾文本第一個字的樣式

Dialog backdrops

關(guān)鍵詞backdrop，設(shè)置<dialog />的背景樣式

響應(yīng)式布局

要在特定斷點處設(shè)置元素樣式，需要使用響應(yīng)式修飾符，例如md lg

以下都是媒體查詢 @media

prefers-color-scheme 明暗主題

prefers-color-scheme 它用于匹配用戶通過操作系統(tǒng)設(shè)置的明亮或夜間(暗)模式。它有兩個不同的取值：light dark
關(guān)鍵詞dark:*，切換為深色模式時，一些定制樣式

prefers-reduced-motion 規(guī)則

關(guān)鍵詞motion-reduce，源自 CSS 新的媒體查詢，prefers-reduced-motion 規(guī)則查詢用于減弱動畫效果，除了默認規(guī)則，只有一種語法取值 prefers-reduced-motion: reduce，開啟了該規(guī)則后，相當于告訴用戶代理，希望他看到的頁面，可以刪除或替換掉一些會讓部分視覺運動障礙者不適的動畫類型

關(guān)鍵詞motion-safe，當用戶沒有啟用Reduced Motion偏好設(shè)置的時候

prefers-contrast 調(diào)整內(nèi)容色彩對比度

關(guān)鍵詞contrast-more、contrast-less

forced-colors 強制顏色模式

關(guān)鍵詞forced-colors

orientation 橫豎屏模式

關(guān)鍵詞portrait，表示豎屏生效樣式
關(guān)鍵詞landscape，表示橫屏生效樣式

print 打印

關(guān)鍵詞print，調(diào)出瀏覽器自帶打印時的一些樣式設(shè)置

@supports

關(guān)鍵詞supports-[...]

以下是html標簽上的自定義屬性

Aria attributes

關(guān)鍵詞aria-*，關(guān)聯(lián) HTML 屬性中的 aria-* 屬性

image.png

<table>
  <thead>
    <tr>
      <th
        aria-sort="ascending"  <== 這里
        class="aria-[sort=ascending]:bg-[url('/img/down-arrow.svg')] aria-[sort=descending]:bg-[url('/img/up-arrow.svg')]"
      >
        Invoice #
      </th>
      <!-- ... -->
    </tr>
  </thead>
  <!-- ... -->
</table>

還可以結(jié)合group 和peer使用，語法如下：
group-aria-[sort=ascending]:rotate-0
peer-aria-[sort=descending]:rotate-180

Data attributes

關(guān)鍵詞data-*/[]，同 aria

Open/closed state

關(guān)鍵詞open:*，修改<details> 或 <dialog>的樣式

API合集

https://www.tailwindcss.cn/docs/hover-focus-and-other-states#quick-reference

總結(jié)

截止到媒體查詢，基本都是可以常用的，自定義屬性的話，因為用的是 React 或 Vue，可以直接根據(jù) data / state 判斷條件，個人感覺應(yīng)用面應(yīng)該比較少