十大Tailwind CSS外掛

---

在本教程中，我們將瞭解十大Tailwind CSS外掛。外掛是使定製成為可能的軟體元件。它添加了特定的功能來自定義程式。它可以編輯和修改程式的字型、顏色和背景。藉助CSS和html，可以製作簡單易用的網頁。CSS具有多種功能來編輯和自定義網頁。

Tailwind CSS排版

Tailwind CSS排版是一個用於設定文件樣式的外掛。它提供了許多字型自定義選項和與排版相關的類，這些類對於設計網站上的文字非常有用。

語法

安裝Tailwind CSS排版。

//using npm
npm install @tailwindcss/typography

Tailwind CSS縱橫比

Tailwind CSS縱橫比允許使用者保持比例尺寸。此處比率使用框的高度和寬度自動計算。此外掛在處理響應式照片或影片時非常有用；能夠在元素上建立縱橫比尤其有用。

語法

安裝Tailwind CSS縱橫比。

//using npm
npm install @tailwindcss/custom-forms --save-dev

Tailwind CSS行限制

Tailwind CSS行限制允許使用者指定在截斷之前應顯示多少行文字。使用者可以使用此功能在預定行數後截斷文字，它還會新增省略號以顯示仍有更多文字可供閱讀。

語法

安裝Tailwind CSS行限制。

//using npm
npm install @tailwindcss/line-clamp

Tailwind CSS 網格

Tailwind CSS 網格是一個允許使用者為任意數量的列和行構建高度可定製和響應式佈局的外掛。它使用強大的CSS網格系統增強了Tailwind CSS，使使用者能夠輕鬆構建複雜的佈局。

語法

安裝Tailwind CSS 網格。

//using yarn
yarn add styled-css-grid

Tailwind CSS 表單

使用Tailwind CSS表單，使用者可以建立表單。它為Tailwind CSS添加了現成的表單樣式，從而簡化了設計既美觀又實用的表單。

語法

安裝Tailwind CSS表單。

npm install -D @tailwindcss/forms

Tailwind CSS滾動捕捉

Tailwind CSS滾動捕捉允許使用者以特定方式調整和對齊元素，以便元素具有響應性。它使使用者能夠為您的網站新增滾動捕捉，從而方便瀏覽冗長的內容頁面。

語法

安裝Tailwind CSS滾動捕捉。

//using yarn
yarn add tailwindcss-scroll-snap --dev

Tailwind CSS主題外掛

Tailwind主題是一個CSS外掛，允許使用者更改網站中的多個元素。它通常用於將網站的主題切換到暗模式。使用者可以自定義自己的主題以符合他們的品味。

語法

安裝Tailwind CSS主題外掛。

//using yarn 
yarn add tailwindcss-theming@next --dev

Tailwind CSS過渡

使用Tailwind CSS過渡，使用者可以在網站上進行過渡。它提供了一種在更改CSS屬性時控制動畫速度的方法。此外，它還提供了一組類，這些類可以輕鬆地將CSS過渡新增到網站元素，從而建立動畫效果。

語法

安裝Tailwind CSS過渡。

//using npm
npm install tailwindcss-transitions

Tailwind CSS海拔

Tailwind CSS海拔允許使用者在影像和元件之間新增海拔。使用者可以使用Tailwind CSS海拔在圖片和元件之間應用海拔。.elevation-z-value實用程式允許使用者提升元素。

語法

安裝Tailwind CSS海拔。

//using npm
npm install tailwindcss-elevation

Tailwind CSS表格外掛

Tailwind CSS表格外掛允許使用者建立Bootstrap表格。使用者可以使用Tailwind CSS表格外掛建立Bootstrap表格。他們還可以使用它使巢狀表格與父表格相同，因為它由Bootstrap繼承。

語法

安裝Tailwind CSS表格外掛。

//using npm
npm install tailwindcss-tables --save