Tailwind: 撸一个按钮

全栈：AXUM、React、NextJS 和 TailWindCSS
18881
2022/11/18 02:12:52
axumfullstackreactnextjstailwind

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

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

<input />

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

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

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

初始状态

<button>点我</button>

版本1

在线查看

  • 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

<button class="bg-blue-600 text-gray-50 px-6 py-2 rounded shadow hover:bg-blue-700 hover:-translate-y-1 hover:shadow-md transition-all duration-500">点我</button>

在线查看

  • 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：动画的持续时间【有关时长的文档】

作业