Tailwind: 撸一个按钮

本章将带你使用 tailwind 撸一个按钮。

看到这个标题的你是否很惊讶，至于吗，一个按钮还要水一章？别躁，你要知道，tailwind 为了在所有浏览器实现统一的效果，对浏览器默认行为进行了丧心病狂的移除——如果你在使用了 tailwind 的页面里直接扔个文本框，你会发现啥都看不到：

<input />

具体移除了哪些默认行为，你可以在官网文档上看到。

正如官方说的，你也可以保留浏览器的默认行为，即在自己的CSS中，移除 @tailwind base;

言归正传，下面开始递进式地撸一个按钮。

初始状态

在线查看

版本1

<button class="bg-blue-600 text-gray-50 px-6 py-2 rounded shadow">点我</button>

• bg-blue-600：设置背景色为深度为600的蓝色 【有关背景颜色的文档】
• text-gray-50：设置文本颜色为深度为50的灰色 【有关文本颜色的文档】
• px-6：设置水平方向的内边距为6 👉 最后提醒一次：注意不是 6px，具体值可以通过上一章的默认配置里找到，也可以直接把光标移到这个类上，会显示出来实际的 CSS 样式 【有关内边距的文档】
• py-2：设置垂直方向的内边距为2
• rounded：让边框出现圆角 【有关圆角的文档】
• shadown：开启阴影效果 【有关阴影的文档】

不错，至少还看的过去。不过略显呆板，让我们进行撸它。

版本2

<button class="bg-blue-600 text-gray-50 px-6 py-2 rounded shadow hover:bg-blue-700">点我</button>

在线查看

• hover:bg-blue-700
  • hover: 应用 CSS 的:hover伪类，作用是响应光标悬停事件【有关伪类的文档】
  • bg-blue-700：设置背景色为深度为700的蓝色
  • 所以，整个的含义是，当光标悬停在按钮上时，背景变成700号的蓝色

版本3

在线查看

• hover:-translate-y-1 【有关移动的文档】
  • 光标悬停时，向上移动1个单位(-translate-y-1)；如果是向下移动1个单位则是正数（translate-y-1）——你至少学会了如何表达负数。
  • 很多 tailwind 类都允许使用负数的表达，比如：top-1、-top-1
• hover:shadow-md：光标悬停时，阴影的强度变成md
• transition-all：开启过渡效果，可以产生动画【有关过渡的文档】
• duration-500：动画的持续时间【有关时长的文档】

作业

本章通过一个按钮，逐步向你展示了如何利用 tailwind 轻松实现一些复杂的样式。发挥你的创意，打开你的脑洞，在本章提供的代码基础上，继续疯狂的撸吧！