Tailwind CSS - 實用優先基礎

上一頁
下一頁

Tailwind CSS 中的實用優先基礎是指使用一系列小型、單一用途的預定義類來直接在 HTML 中為元素設定樣式。與其為每個元素編寫自定義 CSS，不如應用這些預定義的實用程式類來實現所需的外觀。

自定義 CSS 與實用程式類

在設定網頁樣式時，您通常會編寫自己的 CSS 程式碼來自定義事物的外觀。

以下是一個使用自定義 CSS 實現特定設計的示例，展示瞭如何使用 CSS 程式碼應用自定義樣式。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f7fafc;
            margin: 0;
        }
        .container {
            width: 100%;
            max-width: 900px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .description {
            text-align: center;
            margin-bottom: 40px;
            color: #2d3748;
        }
        .description p {
            font-size: 20px;
            margin-bottom: 16px;
        }
        .description ul {
            list-style-type: disc;
            padding-left: 20px;
            text-align: left;
            color: #4a5568;
        }
        .description li {
            margin-bottom: 8px;
        }
        .description li strong {
            font-weight: bold;
        }
        .completed {
            color: #48bb78;
        }
        .current {
            color: #ecc94b;
        }
        .upcoming {
            color: #e2e8f0;
        }
        .tracker {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        .tracker::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: calc(100% - 40px); 
            height: 4px; 
            background: linear-gradient(to right, #48bb78 25%, #ecc94b 25% 50%, #e2e8f0 50% 75%, #e2e8f0 75%);
            z-index: 1;
        }
        .step {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
            margin: 0 15px;  
        }
        .step div {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 24px;  
        }
        .step:nth-child(1) div {
            background-color: #48bb78; /* Completed */
        }
        .step:nth-child(2) div {
            background-color: #ecc94b; /* Current */
        }
        .step:nth-child(3) div {
            background-color: #e2e8f0; /* Upcoming */
        }
        .step:nth-child(4) div {
            background-color: #e2e8f0; /* Upcoming */
        }
        .step span {
            display: block;
            font-size: 16px;
            color: #4a5568;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="description">
            <p>This tracker shows your progress through different stages:</p>
            <ul>
                <li><strong class="completed">Completed:</strong> Finished steps</li>
                <li><strong class="current">Current:</strong> The active step</li>
                <li><strong class="upcoming">Upcoming:</strong> Future steps</li>
            </ul>
        </div>
        <div class="tracker">
            <div class="step">
                <div>✓</div>
                <span>Step 1</span>
            </div>
            <div class="step">
                <div>▶</div>
                <span>Step 2</span>
            </div>
            <div class="step">
                <div>•</div>
                <span>Step 3</span>
            </div>
            <div class="step">
                <div>•</div>
                <span>Step 4</span>
            </div>
        </div>
    </div>
</body>

</html>

您可以透過直接在 HTML 中應用預定義的實用程式類來使用 Tailwind CSS 實現相同的樣式。此方法使設定網頁樣式更快更容易，無需編寫自定義 CSS。

以下是如何使用 Tailwind CSS 重新建立相同的設計

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="flex justify-center items-center h-screen bg-gray-100">
    <div class="w-full max-w-3xl px-4 py-6 bg-white rounded-lg shadow-md">
        <div class="text-center mb-8 text-gray-800">
            <p class="text mb-4 ml-4">This tracker shows your progress through different stages:</p>
            <ul class="list-disc list-inside text-left text-gray-600">
                <li><strong class="text-green-500">Completed:</strong> Finished steps</li>
                <li><strong class="text-yellow-500">Current:</strong> The active step</li>
                <li><strong class="text-gray-300">Upcoming:</strong> Future steps</li>
            </ul>
        </div>
        <div class="relative flex items-center">
            <div class="absolute inset-0 flex items-center pointer-events-none">
                <div class="flex-1 h-1 bg-green-500"></div>
                <div class="flex-1 h-1 bg-yellow-400"></div>
                <div class="flex-1 h-1 bg-gray-300"></div>
                <div class="flex-1 h-1 bg-gray-300"></div> 
            </div>
            <!-- Steps -->
            <div class="flex-1 text-center relative z-10">
                <div class="w-12 h-12 rounded-full bg-green-500 
                     text-white flex items-center justify-center 
                     mx-auto mb-2 text-2xl">
                    ✔ 
                </div>
                <div class="text-sm">Step 1</div>
            </div>
            <div class="flex-1 text-center relative z-10">
                <div class="w-12 h-12 rounded-full bg-yellow-500 
                     text-white flex items-center justify-center 
                     mx-auto mb-2 text-2xl">
                    ▶
                </div>
                <div class="text-sm">Step 2</div>
            </div>
            <div class="flex-1 text-center relative z-10">
                <div class="w-12 h-12 rounded-full bg-gray-200 
                     text-white flex items-center justify-center 
                     mx-auto mb-2 text-2xl">
                    •
                </div>
                <div class="text-sm">Step 3</div>
            </div>
            <div class="flex-1 text-center relative z-10">
                <div class="w-12 h-12 rounded-full bg-gray-200 
                     text-white flex items-center justify-center 
                     mx-auto mb-3 text-2xl">
                    •
                </div>
                <div class="text-sm">Step 4</div>
            </div> 
            <div class="absolute right-0 top-1/2 w-1/4 h-px bg-gray-300"></div> 
        </div>
    </div>
</body>

</html>

在上面的示例中，我們使用 Tailwind CSS 實用程式類重新建立了相同的設計

  • 主體使用 **flex**、**justify-center** 和 **items-center** 將內容在視口（**h-screen**）中水平和垂直居中。
  • 容器為全寬（**w-full**），最大寬度為 **max-w-3xl**，並帶有內邊距（**px-4** 和 **py-6**）。
  • 它具有白色背景（**bg-white**）、圓角（**rounded-lg**）和中等陰影（**shadow-md**）。
  • 文字對齊和顏色由 **text-center**（居中）、**text-gray-800**（主體文字）和 **text-gray-600**（列表項）處理。
  • 字型大小使用 **text-xl**（段落）和 **text-sm**（步驟標籤）設定，步驟指示器內的文字更大（**text-2xl**）。
  • 列表使用 **list-disc** 用於圓點專案符號，並使用 **list-inside** 用於內邊距。步驟指示器具有統一的尺寸（**w-12** 和 **h-12**），為圓形（**rounded-full**），並使用 **flex**、**items-center** 和 **justify-center** 居中。
  • 顏色使用 **bg-green-500**、**bg-yellow-500** 和 **bg-gray-200** 應用，而進度線和拖尾線使用 **bg-gray-300**。
  • 相對和絕對定位管理進度線的佈局，使用 **inset-0** 跨越整個寬度。拖尾線的位置使用 **right-0** 和 **top-1/2**。
  • 邊距使用 **mb-2** 和 **mb-3** 進行調整，以在元素之間提供間距。

使用 Tailwind CSS 可以幫助您快速構建自定義設計，而無需編寫大量額外的 CSS。您無需從頭建立新樣式，而是直接在 HTML 中使用預定義的實用程式類，這可以加快開發速度併產生更簡潔的程式碼。

為什麼要使用 Tailwind CSS？

起初，這種方法可能看起來有點令人困惑，您可能想知道為什麼它優於編寫自己的自定義 CSS。如果您不熟悉它，它看起來可能很複雜。但是，一旦您開始使用 Tailwind CSS，您就會發現很多好處。

  • **更快的開發：**Tailwind CSS 可以加快您的工作流程，因為您可以直接在 HTML 中為元素設定樣式。這意味著減少了在 HTML 和 CSS 檔案之間切換的時間。
  • **設計一致性：**實用程式類有助於保持設計的一致性。由於您在整個專案中都使用同一組類，因此更容易維護統一的外觀。
  • **簡化的更新：**當您需要更改設計時，可以在 HTML 中直接進行。這使得更新設計變得簡單且不易出錯。
  • **更小的 CSS 檔案：**透過使用 Tailwind 的實用程式類，您可以避免編寫大量自定義 CSS。這通常會導致更小的 CSS 檔案並可以縮短頁面載入時間。
  • **響應式設計：**Tailwind 帶有內建的類，用於使您的設計具有響應能力。這意味著更容易建立在所有螢幕尺寸上看起來都很好的佈局，而無需額外的工作。
  • **易於自定義：**Tailwind 是高度可定製的。您可以輕鬆調整其配置以滿足您的特定設計需求和偏好。

  • 學習曲線平緩：雖然可能需要一些時間來適應，但許多人發現，與從頭編寫自定義 CSS 規則相比，實用優先的方法更容易學習和使用。

簡而言之，雖然 Tailwind CSS 乍一看可能有點讓人不知所措，但它的優勢可以使您的編碼過程更快、更高效。值得嘗試一下，看看它如何改善您的工作流程。

為什麼不直接使用內聯樣式？

您可能會認為使用內聯樣式——在 HTML 元素中使用style屬性直接應用 CSS——是一種快速簡便的頁面樣式化方法。雖然它看起來很簡單，但這種方法有幾個缺點。

內聯樣式會使您的程式碼變得雜亂，並使其更難以管理和更新，因為更改需要在多個地方進行。它們還將設計與內容結合在一起，導致 HTML 變得雜亂。

相反，Tailwind 實用程式類提供了一種更有效的方法

  • 設計一致性：內聯樣式通常涉及使用特定值，這可能導致設計不一致。然而，Tailwind 實用程式類是預定義設計系統的一部分。這有助於您輕鬆地在整個專案中保持統一的外觀。
  • 響應式設計：內聯樣式不支援媒體查詢，而媒體查詢對於使您的網站在不同裝置上看起來良好至關重要。Tailwind 包含響應式實用程式，允許您建立能夠平滑適應各種螢幕尺寸的設計。
  • 狀態樣式：內聯樣式無法處理懸停或焦點等互動式狀態。使用 Tailwind，您可以輕鬆地使用內建狀態變體來設定這些狀態的樣式，從而輕鬆建立互動式元素。

簡而言之，與內聯樣式相比，Tailwind 實用程式類提供了一種更具組織性、更高效且更利於效能的方式來設定網頁的樣式。

以下是如何使用 Tailwind CSS 處理懸停和焦點等互動式狀態。

示例

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script> 
</head>

<body class="flex flex-col justify-center items-center 
    h-screen bg-gray-100">
    <div class="max-w-sm w-full py-6 bg-white shadow-lg 
        rounded-lg text-center">
        <h2 class="text-xl font-semibold mb-4">
            Interactive Button Example
        </h2>
        <button class="bg-blue-500 text-white py-2 px-4 
                rounded-lg outline-none hover:ring-2 
                ring-indigo-900 hover:bg-blue-800">
            Hover & Focus Me
        </button>
        <div class="text-sm">
            <p class="hover:text-blue-800 mt-2">
                Hover: Darker Blue
            </p>
            <p class="mt-1 text-blue-300">
                Focus: Light Blue Ring
            </p>
        </div>
    </div>
</body>

</html>

在上面的示例中，按鈕在懸停時顏色會發生變化，使用hover:bg-blue-800。outline-none類刪除預設輪廓，ring-2 ring-indigo-900在按鈕獲得焦點時新增藍色環。

可維護性問題

在使用 Tailwind CSS 時，您可能會擔心管理許多實用程式類，尤其是在它們在整個專案中重複出現時。好訊息是 Tailwind 提供了針對這些問題的簡單解決方案。

以下是一些處理這些問題的技巧

  • 使用元件：為常見的實用程式組合建立可重用的元件。例如，常用的按鈕樣式可以組合成一個元件。
<!-- PrimaryButton.vue -->
<template> 
    <button class="bg-blue-500 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-lg">
        <slot/>
    </button>
</template>
  • 編輯器功能：現代程式碼編輯器提供諸如多游標編輯和簡單迴圈等功能，這使得一次更新多個實用程式類變得更容易。

總的來說，管理 Tailwind CSS 專案可能比維護大型傳統 CSS 程式碼庫更簡單，因為 HTML 通常比複雜的 CSS 規則更容易管理。許多大型公司成功地使用 Tailwind CSS，證明了它在實際應用中的實用性。

列印頁面
上一頁
下一頁
廣告