各位連假結束了，小夥伴們請振作起來，這禮拜咻一下就會飛過去了，快點去補補你們欠下的技術債。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 真香，那咱們明天見。