**用Plugins 讓你的 Tailwind 更便利（入門篇）**
Tailwind 常常和 Bootstraps 拿來比較優缺點，網路上也不乏這類比較文，大家也都耳聞能祥，但是較少人提及 plugins，甚至不知道這是什麼。Plugins 是 Tailwind 一大亮點，不僅可以自行撰寫，也可以套用別人寫好的插件，甚至官方還有提供 Tailwind UI 模板庫供使用，讓使用者在開發上的自由度和速度提高很多！
* **為什麼使用 Plugins？**
由於 Tailwind 本身沒有可以快速拉出的元件直接使用的優勢，為了改善Tailwind 在這方面的不足，提供讓大家自己寫 plugins 來擴充各種 Tailwind 的功能，甚至官方自己也出了 4 套 plugins 提供大家使用。在推薦好用的 plugins 之前，先來探討一下設置環境。
* **環境設定**
自從去年 Rails 升級到 7 之後，就不再將 webpacker 設為預設的打包工具，取而代之的則是各種打包工具的組合，如 jsbundling、cssbundling、esbuild 等等。另外有一個 tailwind 相關之 ruby gem 為 [tailwindcss-rails](https://github.com/rails/tailwindcss-rails)，此 gem 的 readme 僅提及支援官方的插件，並無特別說明支援第三方插件，若需要引用則必須安裝 node_module 並以 yarn add 的方式引入第三方插件，或是 postcss 搭配 esbuild。
本篇 demo 的環境為以下：
1. Ruby v3.0.2
2. Rails v7.0.4
3. tailwindcss-rails gem v2.0
4. node.js v12.18.2
以下推薦幾個常用的官方或是第三方提供的 plugins 給大家！
1. [**Aspect Ratio**](https://github.com/tailwindlabs/tailwindcss-aspect-ratio)
在工作中或專案中，一定會遇到圖片或影片在 RWD 縮放時，需要維持固定的寬高比例呈現，例如 4:3、16:9 等等。這時候你不可能把寬度和高度寫死，你也不會想用純 css 去設定，可能你在 RWD 縮放中設定比例的時候就已經在想我是誰我在哪了。這時候只要套用官方的 plugins：Aspect Ratio，就能夠輕鬆解決啦。
* **安裝**
安裝 Aspect Ratio
```
yarn add tailwindcss-aspect-ratio -D
```
再把 aspect-ratio 加到專案中的 tailwind.config.js 設定檔內
```
// tailwind.config.js
module.exports = {
theme: {
// ...
},
corePlugins: {
aspectRatio: false,
},
plugins: [
require('@tailwindcss/aspect-ratio'),
// ...
]
}
```
* **用法**
使用 **aspect-w-{n}** 和 **aspect-h-{n}** 來設定元素的寬高比
```
<div class='p-4'>
<div class='aspect-w-16 aspect-h-9'>
<%= image_tag 'coffee' %>
</div>
</div>
```
官方提供了 1～16 的預設寬高比
| Width| Height |
| -------- | -------- |
| aspect-w-1| aspect-h-1|
| aspect-w-2| aspect-h-2|
| . . . . . .| . . . . . .|
| aspect-w-15| aspect-h-15|
| aspect-w-16| aspect-h-16|
* **擴充**
如果想要客製化更多種比例，可以在aspectRatio 擴充特定的比例
```
// tailwind.config.js
module.exports = {
theme: {
aspectRatio: {
1: '1',
2: '2',
3: '3',
4: '4',
}
},
variants: {
aspectRatio: ['responsive', 'hover']
}
}
```
2. [**Line Clamp**](https://github.com/tailwindlabs/tailwindcss-line-clamp)
專案中，無可避免地多少會有文章的部分，而在首頁或是文章的 index 頁面通常用預覽的方式呈現。當文章內文過多過長時，如果全部顯示，這樣會顯得版面不好排版也不美觀。通常會以 ”…” 作為超過一定字數或行數的內容，僅顯示部分內容，這時候 line clamp 這個 plugin 就派上用場啦！
* **安裝**
安裝 tailwindcss-line-clamp
```
yarn add tailwindcss-line-clamp -D
```
再把 line-clamp 加到專案中的 tailwind.config.js 設定檔內
```
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/line-clamp'),
// ...
]
}
```
* **用法**
使用 **line-clamp-{n}** 來設定文字呈現的行數
```
<p class='line-clamp-3'>
Coffee is a drink prepared from roasted coffee beans. Darkly colored, bitter, and slightly acidic, coffee has a stimulating effect on humans, primarily due to its caffeine content. It is the most popular hot drink in the world.Seeds of the Coffea plant's fruits are separated to produce unroasted green coffee beans. The beans are roasted and then ground into fine particles that are typically steeped in hot water before being filtered out, producing a cup of coffee. It is usually served hot, although chilled or iced coffee is common. Coffee can be prepared and presented in a variety of ways (e.g., espresso, French press, caffè latte, or already-brewed canned coffee). Sugar, sugar substitutes, milk, and cream are often used to mask the bitter taste or enhance the flavor. (Quoted from Wikipedia.)
</p>
```
官方提供了 1～6 的預設文字呈現行數
| Class |
| -------- |
| line-clamp-1 |
| line-clamp-2 |
| . . . . . . |
| line-clamp-6 |
* **擴充**
如果想要客製更多行數的話，可以在lineClamp 擴充特定的的文字行數
```
// tailwind.config.js
module.exports = {
theme: {
extend: {
lineClamp: {
7: '7',
8: '8',
9: '9',
10: '10',
}
}
},
variants: {
lineClamp: ['responsive', 'hover']
}
}
```
結合以上 **Aspect Ratio** 和 **Line Clamp**，將其套用在小卡片的預覽上，圖片會依視窗大小進行等比例縮放，內文預覽則是僅顯示三行的內容，而非全文。
3. [**Tooltip-arrow-after**](https://github.com/gvital3230/tailwindcss-tooltip-arrow-after)
這個 plugin 是第三方套件，使用起來類似一個對話筐，覺得這個套件適合用在社群軟體的聊天室或是彈出的提醒訊息等等。使用起來簡潔方便，只需要簡單的 ``xxx-arrow-direction`` 即可，不必再另外 ::before、::after 手刻對話筐。
* **安裝**
安裝 tailwindcss-tooltip-arrow-after
```
yarn add tailwindcss-tooltip-arrow-after -D
```
再來把 tooltipArrows 加到專案中的 tailwind.config.js 設定檔內
```
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-tooltip-arrow-after')(),
// ...
]
}
```
* **用法**
在tailwind.config.js 設定檔內的 theme 可以增設一個客製化的 tooltipArrows 的 theme，以 message-arrow 為例：
```
module.exports = {
//...
theme: {
tooltipArrows: theme => ({
'message-arrow': {
borderColor: theme('colors.green.400'),
borderWidth: 1,
backgroundColor: theme('colors.green.200'),
size: 10,
offset: 10
},
}),
}
}
```
設定好了之後便會產生四種方向的 classes：
```
- message-arrow-top
- message-arrow-right
- message-arrow-bottom
- message-arrow-left
```
可以再依專案需求調整這 4 種 classes 的細節樣式，最後再套到網頁上就大功告成囉！透過使用 arrow-right 和 arrow-left 的樣式，一下子就能刻好一個簡易的聊天室。
* **結語**
除了以上介紹的 plugins，網路上還有其他官方或第三方自製的 plugins 供使用者擴充，而且大多都是日常開發會用到且重要的功能，只要兩步驟安裝和設定好就能即開箱即用。
但倘若遇到特殊的 ccs 樣式或者其他需求，而我們也沒有找到一個心目中理想的 plugin 能夠完全符合本身或專案需求呢？此時我們還可以試著著手打造一個 plugin，不僅可以依照需求客製化，在設計上更富有彈性。下篇文章將要介紹，如何量身定做一個 tailwindcss plugin！
Sign in with Wallet
Connect another wallet