听说你还不会 Tailwind CSS（基础·下篇）

type

status

date

slug

summary

1. 前言

这是基础篇的最后一篇，本篇结束后，将进入到进阶部分。

2. 形变

通过 transform 都设置，元素可以进行平移、旋转、缩放、倾斜。

2.1 平移

通过 translate-[x/y]-数值 就能实现 x 轴或 y 轴的平移。

translate-x-10 👉 transform: translateX(2.5rem);

translate-y-10 👉 transform: translateY(2.5rem);

如果想要实现相对于自身的百分比平移：

translate-x-1/2 👉 transform: translateX(50%);

translate-x-full 👉 transform: translateX(100%);

translate-y-1/3 👉 transform: translateY(33.333333%);

translate-y-full 👉 transform: translateY(100%);

2.2 结合子绝父相实现元素水平垂直居中

top-1/2 👉 top: 50%;

left-1/2 👉 left: 50%;

translate-x-[-50%], translate-y-[-50%] 👉 transform: translate(-50%, -50%);

对于负值，translate-x-[-50%] 可以方便地写为：-translate-x-[50%] 或 -translate-x-1/2。因此上述代码等价于：

2.3 旋转

通过 rotate-数值 来旋转元素。

rotate-45 👉 transform: rotate(45deg);

2.4 缩放

通过 scale-数值 来缩放元素，例如：50 表示 0.5，75 表示 0.75，以此类推。也可以通过 scale-[x/y]-数值 对 x 轴或 y 轴来单独设置缩放比例。

scale-50 👉 transform: scale(.5);

scale-75 👉 transform: scale(.75);

scale-100 👉 transform: scale(1);

scale-125 👉 transform: scale(1.25);

2.5 倾斜

通过 skew-[x/y]-数值 来倾斜元素。

3. 过渡效果

使用过渡效果可以让元素移动等更加灵动。

3.1 常规使用

通过给元素添加 transition 类名就相当于添加了以下声明：

3.2 持续时间

持续时间是指这段过渡效果需要多长时间播放完。通过 duration-数值 就能设置，单位为 ms：

3.3 时间函数（速率函数）

通过设置 ease-* 来实现不同的时间函数：

ease-in 👉 以低速率开始，然后逐渐加快。

ease-out 👉 以高速率开始，然后逐渐减慢。

ease-in 👉 以低速率开始，然后逐渐加快，在结束时在此减慢。

3.4 延迟时间

延迟时间是指等多长时间再触发效果。通过 delay-数值 来实现：

4. 动画

在 Tailwind CSS 中，提供了可供直接使用的动画。

4.1 animate-spin

animate-spin 👉

4.2 animate-ping

animate-ping 👉

leading-[40px] 👉 line-height: 40px;

4.3 animate-pulse

animate-pulse 👉

4.4 animate-bounce

animate-bounce 👉

5. 总结

基础篇完结，总体来说还是 CSS 的那些东西，不过在开发效率上确实提高了不少。需要提到的是，没有在 Tailwind CSS 中预定义的内容写了是不会生效的，而且一些容易复用的样式，例如：水平垂直居中等等，如何将它们复用呢？这将是进阶篇的内容。