Day 22 - Tailwind Plugin 使用 (一) => Aspect Ratio、Line Clamp

各位连假结束了，小夥伴们请振作起来，这礼拜咻一下就会飞过去了，快点去补补你们欠下的技术债。Tailwind 官方出了 4 套 Plugins，威尔猪觉得满实用的，今天先介绍 2 个 Plugins。

一、 宽高比 Aspect Ratio

顾名思义，就是让你设定固定比例的宽度跟高度，来维持缩放比例。就像我们会剪裁照片或影片一样 1:1、4:3、5:7、16:9 等，这些数值可以让使用者自订，这样在 RWD 缩放时，比例也不会跟着改变。以往威尔猪使用纯 CSS 设定，真的被 RWD 比例搞死，可能威尔猪功力不到家，现在有这 Plugin，轻轻松松啦。使用步骤如下：

1. 使用 npm 安装 Aspect Ratio 外挂。

npm install @tailwindcss/aspect-ratio

2. 到设定档 tailwind.js.config 新增外挂。

// tailwind.config.js

module.exports = {
  theme: {
    ...
  },
  ...
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    ...
  ],
}

3. 使用 aspect-w-{n} 和 aspect-h-{n} 来设定元素的宽高比。这边威尔猪在 Unsplash 找了一张照片，并设定中央裁减 16:9 的比例。

<div class="aspect-w-16 aspect-h-9">
  <img src="https://images.unsplash.com/photo-1597460761822-bbec36671b03?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" class="w-full h-full object-center object-cover">
</div>

当当～这样我们图片就可以 16:9 跟着视窗满版缩放了，是不是简单快速又方便 (对～威尔猪就是要用美色吸引你们 ?)。

Tailwind 预设的宽高比为下表：

威尔猪觉得原则上这些比例应该够用了，但如果专案还是无法满足，也是可以再新增的，范例如下：

// tailwind.config.js

module.exports = {
  theme: {
    ...
    extend: {
      aspectRatio: {
        17: '17',
        18: '18',
        19: '19',
        20: '20',
      },
    },
  },
  ...
}

二、 ... Line Clamp

第 2 个 Plugin 可以限制字数只显示几行，多余的字会以 ... 呈现，也就类似 Bootstrap 的 .text-truncate 或 CSS 的 text-overflow: ellipsis;，但以往需设定宽度或高度，或是以 JavaScript 来设定显示字数，在 RWD 时也是极其麻烦，现在这 Plugin 通通解决啦，使用方式和上述大同小异。

1. 使用 npm 安装 Line Clamp 外挂。

npm install @tailwindcss/line-clamp

2. 到设定档 tailwind.js.config 新增外挂。

// tailwind.config.js

module.exports = {
  theme: {
    ...
  },
  ...
  plugins: [
    require('@tailwindcss/line-clamp'),
    ...
  ],
}

3. 使用 line-clamp-{n} 来设定文字想要显现的行数。这边威尔猪使用显示 3 行。

<p class="line-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sapiente laudantium quos accusamus, corporis cumque? Rem quas id natus consequuntur asperiores reiciendis, modi temporibus optio, ab obcaecati officiis rerum ut! Illo molestiae veritatis expedita? Cum perferendis aut quis adipisci qui laboriosam odio. Ratione esse iusto minima voluptate similique quibusdam quos. Ab nihil ea deleniti dicta, at tempore quasi, tenetur nisi deserunt earum fuga accusamus fugiat sapiente facere doloremque.
</p>

当当～不管如何缩放，文字就只会以 3 行来显示，多余的文字就会以 ... 来代替。

Tailwind 预设的行数为下表：

当然如果不够还是可以自订的：

// tailwind.config.js

module.exports = {
  theme: {
    ...
    extend: {
      lineClamp: {
        7: '7',
        8: '8',
        9: '9',
        10: '10',
      },
    },
  },
  ...
}

威尔猪利用今天讲的 2 种 Plugins 加上前面几篇讲的内容，做了一张 Card 样式并添加了一些 Hover 效果，有兴趣的同学可以参考看看～DEMO。

今天的乾货满满吧，以前这些在响应式时真的让威尔猪吃尽苦头，也超不容易维护，现在 Tailwind 真香，那咱们明天见。