Tailwind css [4] 使用第三方套件

Tailwind css 在開發模組很強大，除了自己撰寫專屬的樣式，也可以參考別人開源在 github 上面的套件，都可以下載下來使用，非常方便也節省很多時間。

第三方開源套件：Awesome Tailwind CSS

網頁打開後，有幾個目錄說明一下：

Useful Links
是放置 Tailwind css 官方的資源，可以從這些連結知道最新的資訊。例如：Tailwind UI 上有許多免費可複製使用的組件；Tailwind Play 可以直接線上製作的網站。

IDE Extensions
是放置方便進行 Tailwind css 開發的掛件。目前使用 VScode 安裝 Tailwind CSS IntelliSense 官方掛件就很好用了。

Plugins
是放置官方或第三方製作的模組套件，例如：表單樣式、背景顏色…等，不用自己刻下載下來就能直接使用。

第三方套件
範例 1. 文字書寫方向

打開終端機，確認 npm 是開啟狀態後，輸入以下指定程式碼，下載套件 npm 到自己專案：

npm install --save-dev tailwindcss-writing-mode

在 tailwind.config.js 的 plugins 加入以下指定程式碼：

#tailwind.config.js
plugins: [
  require('tailwindcss-writing-mode')({
    variants: ['responsive', 'hover']
  }),
],

當專案使用時，output.css 會自動產生文字書寫相關的 css

# 專案
<div class="writing-mode-vertical">我是直式書寫</div>
# output.css
.writing-mode-horizontal { writing-mode: horizontal-tb }
.writing-mode-vertical { writing-mode: vertical-lr }
.writing-mode-vertical-rl { writing-mode: vertical-rl }