Tailwind CSS Tutorial

Tailwind CSS 教程

Table of content

Tailwind CSS 是一個實用優先的 CSS 框架，透過使用其預定義的實用優先類來設計網站。它是一個低級別的 CSS 框架，易於學習和維護專案。Tailwind CSS 具有許多內建功能和類，可以直接用於 HTML 文件。

為什麼要選擇 Tailwind CSS？

Tailwind CSS 是一個 CSS 框架，在這個快節奏的開發階段，它為建立響應式和 SEO 友好的網站提供了許多優勢。它提供了幾個優勢，包括……

  • 實用優先正規化：無需編寫自定義 CSS，即可使用預定義的類來裝飾 HTML 元素。
  • 響應式設計：Tailwind CSS 實用程式類可以根據螢幕尺寸和斷點使用，因此您的網站可以具有響應性。
  • 一致性和可維護性：其統一的設計確保所有頁面都可以遵循一致的前端設計，易於維護。
  • 快速開發：與使用自定義 CSS 相比，使用預定義的類始終可以提高您的開發速度。
  • 設計靈活性：它擁有數量最多的預定義類，並有機會建立您的設計，使您的設計技能更靈活。

如何使用 Tailwind CSS？

有兩種方法可以在專案中使用 Tailwind CSS，您可以透過 CDN 連結使用它，也可以將其安裝在您的伺服器/本地機器上。

Tailwind CSS 安裝

  • 使用 yarn 安裝 Tailwind CSS
  • 使用 npm 安裝 Tailwind CSS

您可以在本文中檢視 Tailwind CSS 安裝指南 - Tailwind CSS 安裝

Tailwind CSS CDN 連結

使用 script 標籤

只需在 HTML 的 <head> 部分包含一個 <script> 標籤。這無需在伺服器上新增額外檔案即可訪問 Tailwind 的實用程式類。

<script src="https://cdn.tailwindcss.com"></script>
使用 link 標籤

只需在 HTML 的 <head> 部分包含一個 <link> 標籤。這無需在伺服器上新增額外檔案即可訪問 Tailwind 的實用程式類。

<link href= "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
     rel="stylesheet">

Tailwind CSS 示例

這是一個簡單的 Tailwind CSS 示例，描述瞭如何在滑鼠懸停時更改背景顏色。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
 content="width=device-width, initial-scale=1.0">
  <!-- Tailwind CSS CDN Link -->
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Tailwind CSS - Tutorial</title>
</head>

<body class="bg-gray-100">
  <div class="container mx-auto p-4">
    <h3 class="text-3xl font-bold">
      <span class="text-cyan-400">
        Tailwind CSS
      </span>
        Tutorial by
      <span class="text-green-600">Tutorials</span>point
    </h3>
    <p class="mt-4 text-gray-700">
        This is a simple example of Tailwind CSS
        on HTML elements, that is how we can use
        Tailwind CSS classes.
    </p>
    <button class="mt-4 px-4 py-2 bg-green-600
 text-white rounded
 hover:bg-green-900">
 Click Me
    </button>
  </div>
</body>

</html>

學習 Tailwind CSS 的先決條件

在開始學習 Tailwind CSS 教程之前，您需要具備 HTML 知識和基本的 CSS 知識。您可以從我們的免費 HTML 和 CSS 教程中學習 HTML 和 CSS。

Tailwind CSS 入門

既然您已經瞭解了 Tailwind CSS，本指南涵蓋了安裝、設定和核心概念，以幫助您開始使用實用優先 CSS 構建響應式網站。

Tailwind CSS 佈局

Tailwind CSS 佈局 包含基於重要主題的實用程式類列表，以建立有效的佈局。

Tailwind CSS Flexbox 和 Grid

Tailwind CSS Flexbox 和 Grid 是一個佈局模組，可以有效地在 flex 或 grid 容器內對齊專案。

Tailwind CSS 間距

Tailwind CSS 間距 包括內邊距 (Padding)、外邊距 (Margin) 和元素間距 (Space Between)。這些是 Tailwind CSS 間距的重要概念，用於在任何元素上建立內部或外部空間，需要用到內邊距和外邊距。

Tailwind CSS 尺寸

Tailwind CSS 尺寸 包括寬度 (width)、高度 (height) 和尺寸 (size)。寬度和高度也分別有單獨的類來定義任何元素的最大和最小寬度和高度。

Tailwind CSS 排版

Tailwind CSS 排版涵蓋了廣泛的預定義類，有助於直接在網頁上設定文字樣式。

Tailwind CSS 背景

Tailwind CSS 背景 包含一系列重要的實用程式類，提供控制背景大小、位置和有效背景影像對齊的簡單方法。

Tailwind CSS 邊框

Tailwind CSS 邊框 涵蓋了廣泛的預定義類，用於顏色、寬度和圓角，方便設定元素邊框樣式。

Tailwind CSS 效果

Tailwind CSS 效果 包括盒陰影 (Box Shadow)、陰影顏色 (Shadow Color)、不透明度 (Opacity)、背景混合 (Background Blend) 和混合模式 (Mix Blend mode)。

Tailwind CSS 濾鏡

Tailwind CSS 濾鏡 用於直接在 HTML 程式碼中將 CSS 濾鏡應用於元素，無需自定義 CSS。Tailwind CSS 濾鏡類可有效地用於增強元素的可見性和外觀。

Tailwind CSS 表格

Tailwind CSS 表格 包括邊框摺疊 (Border Collapse)、邊框間距 (Border Spacing)、表格佈局 (Table layout) 和標題位置 (Caption Side)。

Tailwind CSS 過渡與動畫

Tailwind CSS 過渡和動畫是重要的實用程式類，用於在元素上應用不同的過渡效果和動畫。

Tailwind CSS 變換

Tailwind CSS 變換 是 Tailwind CSS 中重要的實用程式類，可以對元素進行不同的變換。

Tailwind CSS 互動性

Tailwind CSS 互動性 涵蓋了廣泛的預定義類，用於為元素新增互動功能，例如懸停效果、焦點狀態、過渡等等。

Tailwind CSS 常見問題

這裡有一些關於 Tailwind CSS 的常見問題解答，本節將簡要解答這些問題。

問1. 解釋 Tailwind CSS 中“實用優先”的概念？

“實用優先”意味著該框架專注於提供可以直接在 HTML 文件中使用的實用程式類。

問2. Tailwind CSS 是開源的（免費使用）嗎？

Tailwind CSS 是一個開源專案，可免費使用。

問3. 如何將 Tailwind CSS 整合到 HTML 檔案中？

我們可以透過 CDN 連結以及透過 npm 或 yarn 安裝來輕鬆地將 Tailwind CSS 整合到專案中。

問4. Tailwind CSS 的最新版本是什麼？

Tailwind CSS 的當前版本是 3.4.4

問5. 為什麼 Tailwind CSS 比 Bootstrap 更好？

Tailwind CSS 和 Bootstrap 都是流行的 CSS 框架，但 Tailwind CSS 提供了用於高度定製設計的實用程式類，而 Bootstrap 提供了現成的元件，但定製性更有限。

問6. 如何下載 Tailwind CSS 排版？

我們可以使用提供的命令下載 Tailwind CSS 排版，以便輕鬆地將預設樣式的排版整合到您的專案中。
npm install @tailwindss/typography

問7. 如何在 Tailwind CSS 中使文字加粗？

為了實現粗體文字，我們可以輕鬆地新增實用程式類 font-bold。

問8. 如何同時水平和垂直居中？

我們可以輕鬆地新增實用程式類 self-center。

問9. 如何安裝 Tailwind CSS 自定義表單？

使用給定的命令可以輕鬆安裝 Tailwind CSS 自定義表單，從而增強專案中表單的樣式和自定義功能。
npm install @tailwindcss/custom-forms - - save-dev
列印頁面
上一頁
下一頁
廣告