什麼是 Tailwind CSS
Tailwind CSS就像是樂高積木，但它是用來搭建網站外觀的。想象一下，你有一盒裝滿各種小零件的樂高，每個零件都有特定的形狀和顏色，你可以隨意挑選這些零件拼接在一起，很快就能做出你想要的模型。相對於傳統的CSS寫法， Tailwind CSS更加便捷、快速，不用從頭開始寫很多複雜的CSS樣式規則，也不用擔心樣式衝突，因為每個類名都做好了自己的工作，而且很容易理解和修改。所以，Tailwind CSS讓網頁設計變得更加快捷、直觀，特別適合快速製作原型或是需要快速迭代的專案。
為什麼要用 Tailwind CSS（舉例）
如果讓你做一個下面這樣的按鈕，滑鼠停留時變為深藍色，你會怎麼做呢？？？
先讓我們來看看傳統的CSS是如何寫出來的
styles.css:
.button {
background-color: #007bff; /* 藍色背景 */
color: white; /* 文字白色 */
padding: 10px 20px; /* 內邊距 */
border-radius: 5px; /* 圓角 */
text-decoration: none; /* 去除下劃線 */
font-size: 16px; /* 字型大小 */
}
.button:hover {
background-color: #0056b3; /* 滑鼠懸停時變深藍 */
}
index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>傳統CSS按鈕示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <a href="#">點選我</a> </body> </html>
再讓我們看看如何用Tailwind CSS寫
index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS按鈕示例</title> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"> <!-- 引入Tailwind CSS CDN --> </head> <body> <a href="#" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-700">點選我</a> </body> </html>
在這個例子中，可以看到：
傳統CSS需要手動編寫樣式規則，並透過類名引用，這給予開發者完全的自由度來定製樣式，但可能涉及到較多的程式碼管理和維護工作。
Tailwind CSS則透過預設的類名快速應用樣式，大大減少了CSS程式碼量，提高了開發速度。不過，這要求開發者熟悉Tailwind的類名體系，有時可能需要查閱文件。
怎麼安裝 Tailwind CSS
1. 初始化專案： 如果你還沒有一個專案，首先需要建立一個新的專案並初始化npm。如果你已經有專案，跳到下一步。
2. 安裝Tailwind CSS
開啟終端，導航到專案根目錄，透過npm安裝 tailwindcss，然後建立自己的tailwind.config.js 配置檔案。
npm install -D tailwindcss npx tailwindcss init
3. 配置 Tailwind CSS： 在 tailwind.config.js 檔案中，你可以根據專案需求自定義主題、元件、實用類等。初始情況下，預設配置應該足夠啟動和執行大多數專案。
export default {
content: [
"./index.html",
"./src/**/*.{js,vue,jsx,tsx}" //* 模糊匹配 ** 所有 任何層級
],
theme: {
extend: {},
},
plugins: [],
}
content 配置告訴 Tailwind CSS 哪些檔案需要被掃描，以查詢並提取類名。
theme 部分允許你定製和擴充套件 Tailwind CSS 的設計主題，比如顏色、字型大小、間距、邊框等等。extend 物件用於新增或覆蓋預設主題變數，保持了對預設主題的良好擴充套件性。
plugins 陣列用於載入額外的 Tailwind CSS 外掛，這些外掛可以是官方提供的，也可以是社羣開發的，用於增加更多的功能和樣式。
4. 引入 Tailwind CSS 到專案中： 在你的CSS入口檔案（可能是 app.css、styles.css 或 main.css 等）頂部，新增以下程式碼來引入 Tailwind CSS 的基本樣式、元件和實用程式類：
@tailwind base; @tailwind components; @tailwind utilities;
5. 開始使用： 現在你可以在HTML檔案中使用 Tailwind CSS 的類名來快速構建佈局和樣式了。
Tailwind 的基本使用
Tailwind CSS 的基本使用非常直觀，主要透過在 HTML 元素的 class 屬性中新增預定義的類名來快速應用樣式。下面是一些基本的使用示例來幫助你入門：
1. 文字樣式
文字顏色：
text-red-500會使文字變為中等飽和度的紅色。文字對齊：
text-center使文字居中對齊，text-right為右對齊。字型大小：
text-xl會應用一個較大的字型大小（具體大小取決於你的配置）。
<p class="text-red-500 text-center">歡迎來到我們的網站！</p> <h1 class="text-3xl font-bold">頭條新聞</h1>
2. 佈局與間距
容器：
container類可以建立一個寬度受限且水平居中的容器。填充與邊距：
p-4新增四面等距的內邊距（padding），m-2新增外邊距（margin）。響應式：使用
md:p-6可以設定在中等螢幕尺寸及以上時的內邊距。
<div class="container mx-auto p-8"> <div class="bg-gray-200 p-6 rounded-lg m-4">這是一個卡片</div> <div class="hidden md:block bg-gray-300 p-4">僅在中等尺寸以上螢幕顯示</div> </div>
3. 背景與邊框
背景顏色：
bg-blue-300應用一種淺藍色背景。邊框：
border-2 border-green-500新增寬度為2畫素的綠色邊框。圓角：
rounded-lg使元素具有大圓角。
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">點選我</button> <div class="border-4 border-dashed border-gray-400 p-4">帶虛線邊框的盒子</div>
4. 顯示與隱藏元素
顯示：
block、inline-block、inline控制元素的顯示方式。隱藏：
hidden隱藏元素，響應式類如sm:block md:hidden可以控制不同螢幕尺寸下的顯示狀態。
<div class="sm:block md:hidden">只在小到中等尺寸螢幕上顯示</div>
5. 動畫與過渡
過渡：
transition duration-300 ease-in-out新增一個平滑的過渡效果。動畫：雖然 Tailwind 預設沒有動畫類，但可以透過自定義或外掛新增。
<button class="bg-blue-500 hover:bg-blue-700 transition duration-300">滑鼠懸停變色</button>
透過這些基本示例，你可以開始構建具有響應式設計的網頁，無需編寫大量自定義CSS程式碼。
ok，今天的Tailwind CSS的分享就到這了，小編還在學習中，歡迎大佬們提出建議！！！非常感謝！！！
