Tailwind CSS - 簡介

---

---

Tailwind CSS是一個實用優先的框架，這意味著它是一種CSS架構方法，它使用預定義的實用類來設定HTML元素的樣式，而不是編寫自定義CSS，無需離開HTML文件檔案。

內容目錄

 

什麼是Tailwind CSS？

它是一個實用優先的框架，目前是最好的CSS框架。它擁有大量的預定義類、自定義選項以及刪除HTML元素預定義的不必要CSS的能力。

實用優先方法的優勢

• 一致性：透過建立有限的樣式集供使用，開發人員可以保持一致性。
• 自定義：透過從配置檔案生成實用類，您可以自定義現有樣式或建立自己的類。
• 效率：透過避免使用不必要的樣式膨脹CSS，易於保持效率。
• 快速UI開發：透過將預先設計的實用類直接應用於HTML元素。
• 節省時間：透過重用相同的尺寸和顏色，這也可以改進UI。

Tailwind CSS 版本

下面提到的版本可以在官方網站上檢視；這些版本之間也有許多小的更新。

Tailwind CSS 提供了什麼？

Tailwind CSS提供了很多功能，例如設計佈局、Flexbox、Grid、間距、尺寸、排版、背景、邊框、效果、濾鏡、表格、過渡、動畫、變換和互動性。在這些之前，您需要了解核心概念和自定義，以便充分發揮Tailwind CSS的潛力。

Tailwind CSS 核心概念

Tailwind CSS核心概念涵蓋了廣泛的基礎主題，例如**實用類**、**自定義配置**等等。

• Tailwind CSS - 實用優先基礎
• Tailwind CSS - 懸停、焦點和其他狀態
• Tailwind CSS - 響應式設計
• Tailwind CSS - 深色模式
• Tailwind CSS - 重用樣式
• Tailwind CSS - 新增自定義樣式
• Tailwind CSS - 函式與指令

Tailwind CSS 自定義

Tailwind CSS是一個高度可定製且實用優先的CSS框架。其自定義選項包括可配置的'tailwind.config.js'檔案、可主題化架構和外掛架構。其自定義允許配置內容、主題、螢幕、間距、外掛等等。

• Tailwind CSS - 配置
• Tailwind CSS - 內容
• Tailwind CSS - 主題
• Tailwind CSS - 螢幕尺寸
• Tailwind CSS - 顏色
• Tailwind CSS - 間距
• Tailwind CSS - 外掛
• Tailwind CSS - 預設

Tailwind CSS 的侷限性

如果您計劃透過CDN連結使用Tailwind CSS，則存在某些限制。

• 無法使用外掛。
• 無法使用指令。
• 無法自定義Tailwind的預設主題。

Tailwind CSS 的優勢

• 響應式佈局：Tailwind CSS提供了一系列實用類；其中一個類用於格式化響應式佈局。只需在文件中插入一行類，我們就可以實現組織良好的響應式佈局。
• 效用優先的基本原則：Tailwind CSS是一個效用優先的CSS框架，“效用優先”意味著該框架專注於提供效用類。這使我們能夠直接在HTML文件上使用效用類。
• 高度可定製：由於其可擴充套件性和效用優先的方法，Tailwind CSS高度可定製。您可以輕鬆自定義調色盤、間距、排版和斷點。
• 更少的自定義程式碼：Tailwind CSS使我們能夠透過向HTML文件新增效用類來直接向HTML文件新增設計，從而無需使用自定義CSS。

Tailwind CSS 的劣勢

• Tailwind CSS包含大量的效用類，因此開發人員需要花費更多時間學習如何有效地使用該框架。
• 缺少標題和導航元件。