Tailwind: 撸一个报价卡片

本章我们将使用 tailwind 撸一个报价卡片。

首先，我们先从制作单一卡片开始，制作好了一个卡片，将它复制多份就可以了。

制作卡片

• #card-1：卡片的主容器（为了查看效果，这里设置了宽度 w-96，下一节将去除这个宽度）

  • flex：开启 flex 布局
  • scale-95：整体缩小到原始大小的 95% 【文档】
  • flex-col：让子元素垂直布局
  • items-center：让子元素垂直居中
  • justify-center：让子元素居中分布
  • space-y-6：让每个子元素的垂直方向的间隙设置为6
  • rounded-lg：使用大小为 lg 的圆角
  • border-8：使用大小为8的边框
  • border-gray-600：使用600号灰色作为边框颜色
  • bg-gradient-to-r：使用从左到右的线性渐变背景【文档】
  • from-gray-50 ：使用50号灰色作为起始渐变色【文档】
  • to-gray-100：使用100号灰色作为结束渐变色
  • p-6：内边距为6
  • shadow-md：使用 md 大小的阴影
  • transition-all：开启全部过渡效果
  • duration-500：动画时间设置为500毫秒
  • hover:scale-100：鼠标悬停时，整体缩放到原始大小的 100%，即恢复到原始大小
  • hover:border-gray-800：鼠标悬停时，边框颜色改成800号灰色

• #card-header-1：使用 flex 的垂直方向对子元素进行布局，并且居中对齐，垂直间隙为4

• #card-title-1：将文字设置为2xl大小

• #card-price-box-1：使用 flex 的水平方向对子元素进行布局，并且居中对齐，水平间隙为2

• #card-price-only-1：设置为块级元素，并将文字设置为 sm 大小

• #card-price-1：设置为块级元素，并将文字大小设置为 xl，使用将文字颜色设置为700号蓝色

• #card-detail-1：使用 flex 的垂直方向对子元素进行布局，并且居中对齐，垂直间隙为2，并将文字颜色设置为600号灰色

• #card-detail-1 > li

  • before:mr-2：设置 ::before 伪类的右外边距为2
  • before:content-['✅']：设置 ::before伪类的内容为 ✅

• #card-buy-1 > button

  • border-blue-600/95

    • 设置边框颜色为600号蓝色，透明度为95
    • 默认配置的，除了 white 和 black之外的所有类型的颜色都能设置透明度
    • 设置透明度的方式就是在颜色值后面加上 /95，你可以想象成是在做除法

  • bg-gradient-to-br：使用从左上到右下的线性渐变

  • from-blue-600/75、to-blue-600/90：分别设置起始渐变色和结束渐变色，同样它们也可以设置透明度。

  • hover:bg-gradient-to-tl：当鼠标悬停时，使用从右下到左上的线性渐变

点击这里查看代码和效果。

• #cta：为了显示起来好看，临时用的容器，对于卡片本身来说，它可有可无。
  • container：正如上一章说的，tailwind 提供了容器类，就是它了。
    • 已定义的断点上，它会把容器的最大宽度设置为与断点相同的大写
    • 小于 sm 断点的屏幕上，它会把容器的宽度设置为 100%
    • 不同于 bootstrap 这些框架，tailwind 的 container 不会自动水平居中，需要手动加上 mx-auto
• #flex-cta：用于布局多个卡片的容器
  • 在移动设备上，它是垂直布局的，并且有4个单位的垂直间隙
  • 在桌面设备上，它是水平布局的，并且有8个单位的水平间隙
• 其它元素
  • 为了实现响应式布局，都以移动端优先，给每个元素通过md断点增加了适配不同设备的样式
  • 针对卡片2，
    • 桌面设备：我们把原本属于 hover 伪类的样式直接给到了 md 断点，这样就能在视觉上产生关注点