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

广告