Day 09：「啊～不要碰我！我会变色～」- 变化模式 (Variants)

欸欸欸！别误会啊！
可别读完标题就跑掉了。

「可是兔兔，你那个标题不妥吧！」

齁，我才是觉得你想的不妥咧～
那个是会变颜色的意思啦！

今天，就是要来介绍一些像是滑鼠停在上面会变颜色的效果！
也就是变化模式 (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