欸欸欸！別誤會啊！
可別讀完標題就跑掉了。

「可是兔兔，你那個標題不妥吧！」

齁，我才是覺得你想的不妥咧～
那個是會變顏色的意思啦！

今天，就是要來介紹一些像是滑鼠停在上面會變顏色的效果！
也就是變化模式 (Variants)。
 

準備工作

<div class="flex justify-evenly p-10">
  <box class="bg-red-500" tabindex="0">
    1
  </box>

  <box class="bg-blue-500" tabindex="1">
    2
  </box>
</div>

今天的範本長的樸素了點，就是兩個簡單的方塊 XD
因為我們要用變化模式把它們變得不樸素！
 

滑鼠懸停 (hover)

藉由 hover:{樣式} 這個變化模式當前綴詞，我們可以設定 / 改變 元素被滑鼠懸停時的樣式，例如 hover:hidden 功能是元素被滑鼠懸停時隱藏。

以下是預設可以套用 hover: 變化模式的功能：

• 背景色彩 (bg-*)
• 背景透明度 (bg-opacity-*)
• 邊框顏色 (border-*)
• 邊框透明度 (border-opacity-*)
• 陰影 (shadow-*)
• 漸層色標 (from-* 、via-* 、to-*)
• 不透明度 (opacity-*)
• 旋轉 (rotate-*)
• 縮放 (scale-*)
• 傾斜 (skew-*)
• 文字色彩 (text-*)
• 文字裝飾
• 文字不透明度 (text-opacity-*)
• 變形 (translate-*)
   

可能透過上面的敘述，還看不太懂也沒關係，我們直接來嘗試。這邊用 hover:bg-blue-500 加在紅色方塊上，把 hover:bg-red-500 加在藍色方塊上，來讓他們兩個各自被滑鼠懸停時，會變成對方的顏色：

<div class="flex justify-evenly p-10">
  <box class="bg-red-500 hover:bg-blue-500" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-red-500" tabindex="1">
    2
  </box>
</div>

快看！ 這時候滑鼠移到藍色方塊上，它就變成紅色了！
大成功～～

但剛剛只是實驗，現在我們正式來一遍。 現在改成用 hover:bg-red-400 加在紅色方塊上，把 hover:bg-blue-400 加在藍色方塊上：

<div class="flex justify-evenly p-10">
  <box class="bg-red-500 hover:bg-red-400" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400" tabindex="1">
    2
  </box>
</div>

很好，非常有效果！
輕鬆簡單又漂亮呢～

我們再來加點其他的吧！
 

焦點 (focus)

藉由 focus:{樣式} 這個變化模式當前綴詞，我們可以設定 / 改變 元素獲得焦點時的樣式，例如 focus:bg-blue-500 功能是元素獲得焦點時將背景色設定為明度 500 的藍色。

然後因為 focus 預設支援的功能比 hover 多一半以上，
篇幅問題就不介紹了，我們直接來使用。

這邊我們要順便來用到一個之前沒介紹到的，ring。
ring 是可以用陰影來快速完成描邊的功能，
跟邊框的用法一樣，像是 ring-4 ring-green-400 就是設定描邊寬度為 4px 且顏色是明度 400 的綠色。

現在結合 ring ，用 ring-red-300 focus:ring-4 加在紅色方塊上，把 ring-blue-300 focus:ring-4 加在藍色方塊上，這樣方塊獲得焦點時就會顯示出各自顏色的描邊：

<div class="flex justify-evenly p-10">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4" tabindex="1">
    2
  </box>
</div>

這樣是不是美美噠！
但還可以在加點東西哦哦哦哦～

接下來基於 focus，我們來玩一個好玩的功能吧！
 

內部焦點 (focus-within)

藉由 focus-within:{樣式} 這個變化模式當前綴詞，我們可以設定 / 改變 元素內部有子元素獲得焦點時的樣式，例如 focus-within:bg-blue-500 功能是元素內若有子元素獲得焦點時將背景色設定為明度 500 的藍色。

然後因為 focus-within 預設支援的功能跟 focus 差不多，
這邊一樣直接來使用。

用 focus-within:bg-green-100 加在最外層，這樣任一個方塊獲得焦點時最外層的背景顏色就會變成淺淺美美的綠色：

<div class="flex justify-evenly p-10 focus-within:bg-green-100">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4" tabindex="1">
    2
  </box>
</div>

超讚，這個功能真的很好用，
尤其是在做表單的時候，舉例官方的範例：

就是可以在裡面的輸入框獲取焦點時，
把文字顏色改為較深的灰色。

還有其他功能可以應用，我們接著看看吧！
 

在群組滑鼠懸停 (group-hover)

藉由 group-hover:{樣式} 這個變化模式當前綴詞，我們可以設定 / 改變 群組內元素被滑鼠懸停時的樣式，例如 group-hover:bg-blue-500 功能是父元素若有 group 功能時，群組被滑鼠懸停時將群組內元素的背景色設定為明度 500 的藍色。

以下是預設支援的群組滑鼠懸停功能

• 背景色彩 (bg-*)
• 背景透明度 (bg-opacity-*)
• 邊框色彩 (border-*)
• 邊框透明度 (border-opacity-*)
• 陰影 (shadow-*)
• 不透明度 (opacity-*)
• 文字色彩 (text-*)
• 文字裝飾
• 文字不透明度 (text-opacity-*)

這邊前面所說的群組就是，若某元素有 group 這個 class，那它就是一個群組，在群組內的元素都能使用 group-hover 的功能。

用 group 加在最外層，然後裡面紅色和藍色方塊都加上 group-hover:text-gray-600，那麼當最外層被滑鼠懸停時，方塊裡面的字顏色都會變深：

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600" tabindex="1">
    2
  </box>
</div>

↓ before ↓


↑ after ↑

這個在做設計一些視覺上的聚焦時非常有作用，
再次拿官方的範例來舉例，比如：

這樣簡簡單地的變化，也能美到說不出話 XD
 

那差不多就這樣了，今天的內容有趣嗎？

有了這些簡單的功能應用，就可以做出很棒的效果啦！
不過這些變化模式仍然不是全部哦，
有興趣的人可以去官方看看有什麼功能可以用，
我會把連結放在下面哦～

然後 ...
今天有作業哦！
 

給你們的回家作業：

• 作業實施要點：
  • 試著方塊顏色，改變各個變化觸發時的樣式
• 懵懂的方塊們：一鍵去教育！
• 它們都變色了：警察叔叔，就是這裡！
   

全部預設可用的變化模式放在這裡：點我看文件
 

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

因為兔兔的朋友們都說昨天不管叫兔兔做什麼，
兔兔總是都說沒有心情。

兔兔不相信，於是翻開日記本翻到昨天那頁：

今日的心情： 

咦？ 原來真的沒有心情XD