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，证明了它在实际应用中的实用性。

打印页面