T

Tailwind CSS 从零到精通 - 启动并运行（第 1 部分，共 4 部分）🚀

2025-06-10

Tailwind CSS 从零到精通 - 启动并运行（第 1 部分，共 4 部分）🚀

查看本系列的后续文章 >

欢迎阅读 Tailwind CSS 完整指南，助您构建高质量的前端网页。在本系列文章中，我们将涵盖掌握 Tailwind 完整工作流程所需的每一个主题。

从零开始，您将了解它的所有信息，包括为什么要使用它，它提供哪些功能以及与其他框架相比有哪些优势。

不用担心，我们会提供示例、清晰的解释以及你需要了解的每个主题的细节。不仅如此，我们还将重点介绍一些鲜为人知但实际应用中非常有用的功能。

那么，谁准备好深入探索 Tailwind 的世界了？让我们先从你现在可能最常问的问题开始。

什么是 Tailwind CSS？

Tailwind是一个实用优先的CSS 框架，它允许您向网页添加样式，而无需编写任何自定义 CSS 代码。

让我们剖析一下我上面写的两件重要的事情：

  1. “实用优先”意味着它不使用常规且过时的框架类，而是使用底层实用程序，这些实用程序对于设置任何 HTML 元素的样式至关重要。这些样式可能包括padding、display、等width。height

  2. “无需编写任何自定义 CSS 代码”意味着……您将摆脱那些只需根据提供的设计来设置一个元素样式就需要编写的冗长的 CSS 代码块。Tailwind 可以处理这一切。

因此，它没有提供预构建的组件，而是提供了实用类。这就是它与众不同之处。Tailwind 的创建者 Adam Wathan 在本文中阐述了如何使用实用类。

但为什么是 Tailwind？

我明白。现在有很多 CSS 框架和库，比如 Bootstrap、Bulma、Foundation 等等，都非常流行，应用也非常广泛。你可能会想：“我为什么还要学习另一个 CSS 框架？有什么用？它能给我带来什么好处？” 我的答案是：“虽然它可能不是满足你样式需求的完美解决方案，但它确实具有以下一些值得你思考和尝试的功能……”：

  1. 只使用你需要的：大多数竞争对手会直接给你提供太多不必要的类。尤其是在处理一些大型项目时，这会变得非常棘手。而使用 Tailwind，你可以选择需要应用的样式，编写代码，然后立即生效。

  2. 您无需编写自定义 CSS：在大多数情况下，您无需覆盖基类。除非您拥有包含大量自定义元素的复杂设计系统，否则您将使用此框架提供的内置样式，因为它始终为您提供低级实用程序类。

  3. 它甚至会删除未使用的 CSS 代码！多亏了 PurgeCSS（我们稍后会讨论），当你运行它的命令时，它会自动删除项目中所有未使用的 CSS 代码。最终得到的打包文件干净整洁，没有任何繁重的负载，从而缩短了 CSS 加载时间，并最终提升了页面的整体加载时间。

  4. 如果您愿意，定制起来真的很容易：当然，有时现有功能可能不够用。您可以自由更改配置文件，添加您自己的组合，并按照设计负责人的要求进行操作！只需在 JSON 文件中添加一些对象即可！

  5. 内置响应式类：无需编写那些棘手的媒体查询。使用 Tailwind，您可以直接在 HTML 中插入响应式功能。一旦应用断点，一切都会神奇地改变。

  6. 出色的自动完成支持：如果您正在使用流行的 VS Code 工具编写代码，则可以安装Tailwind CSS IntelliSense 扩展，它为您提供自动完成建议、linting、类定义等。因此，如果您忘记要padding应用什么尺寸，只需开始输入并查看差异。

  7. 支持暗黑模式、 Grids等新CSS功能，甚至还有自己的组件库。还需要我多说吗？

PurgeCSS 效果

Tailwind CSS 拥有 Purge 的强大功能。PurgeCSS是一款用于从 CSS 文件中删除未使用 CSS 的工具。您可以轻松地将其集成到您的 Tailwind 项目中。

在针对生产环境进行优化时（本系列第 4 部分将详细介绍生产环境），使用 Purge 命令时，它会检查 HTML 代码中所有未使用的类。只需将包含标记代码（例如.html、.jsx、.vue等）的文件扩展名添加到配置对象，然后运行 ​​Purge 命令即可。您可以看到输出的构建文件已得到优化，并且仅使用了所需的类。

别担心，我们将在本系列文章的结尾了解所有这些内容。

现在您知道它提供了什么以及为什么它可能成为您的 Web 应用程序的下一个 CSS 框架。

本系列文章的第一部分将介绍如何使用 Tailwind 入门并快速创建一个网页版块。只需掌握一些基本知识，就能让你自信地编写代码。

以下是我们将要经历的整个过程的简要概述：

安装

嘘……等等。我得告诉你，目前还没有运行某些命令的功能npm。我们只会在当前演示中简单地拉取 CDN 的上层代码。

现在的主要目标不是开始繁重的工作流程，而是理解基本概念。

这样，您可以打开index.html文件，编写初始 HTML 代码，然后添加以下内容：

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

这会通过 CDN 引入最新的配置构建，以便您可以随时使用基类。

好了，看起来这个快速安装已经完成了！我们可以继续构建了吗？还不行。首先，我们来理清一些基本概念。

基本概念

Tailwind 附带了大量您应该了解的实用程序类。让我们通过一个例子来看看最常见的几个。

如果您要制作这个与网页中心对齐的小框，您将需要编写以下 CSS（确切的数字会有所不同）：

盒子图像

div {
  width: 200px;
  height: 200px;
  display: block;
  background: white;
  border-radius: .5rem;
  box-shadow: 3px 0px 14px -1px rgba(0,0,0,0.16);
  margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

但可以使用 Tailwind CSS 实现相同的样式：

<div class="min-h-screen bg-gray-200 flex flex-col justify-center">
    <div class="sm:mx-auto">
        <div class="bg-white shadow-lg p-20 rounded-lg" />
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

乍一看，您可能有点难以理解所写的内容，但请允许我在这里解释一下每个实体：

  • 我们需要三个div元素来从头创建该元素。第一个元素为整个容器提供了最小高度，100vh以便我们能够利用Flexbox的强大功能将整个元素对齐到屏幕中心。

  • 第二个div具有一些响应式对齐类，可以在您更改视口的宽度时实现（请参阅下面此代码的实时演示链接）。

  • 最后，我们得到了具有所有样式属性的实际方形元素。

现在让我们了解正在使用哪些实用程序类。

  1. min-h-screen：这min-height: 100vh;在 CSS 中等于。

  2. bg-gray-200：这会使网页body元素的背景颜色变为浅灰色或rgba(229, 231, 235, 1)更具体。

  3. flex flex-col justify-center：这些都是 Flexbox 样式。它告诉 Tailwind 使用类似display: flex;use 的方式，然后将内容居中对齐。flex-directioncolumn

  4. sm:mx-auto：每次看到 Tailwind 属性使用前缀时，你都可以确定它要么使用了响应式设计功能，要么使用了某些状态前缀，例如悬停、焦点和其他状态。在小视口上，我们希望容器的水平边距（即左右边距）为auto。

  5. bg-white shadow-lg p-20 rounded-lg：所有这些都与我们制作的盒子的实际“外观”相对应。从将其颜色设为白色，到添加较大的阴影、添加填充5rem，最后将边角修圆。

那么我从哪里知道p-20等于padding: 5rem;？嗯，所有这些在官方文档中都有很好的记录。值得一提的是，Tailwind 的大小是基于0.25rem单位乘法的。

如果您愿意，那么您可以尝试使用我上面写的代码。

浏览器支持

了解 Tailwind 支持哪些浏览器以及如何管理供应商前缀（如果有）非常重要，这样才能支持广泛的浏览器和系统。

截至撰写本文时，Tailwind CSS 支持 Chrome、Firefox、Edge 和 Safari 的最新稳定版本。但如果您是老 IE 用户，并且（无论如何）需要支持 IE，那么最新版（v2.0）的 Tailwind 并不适合您。您必须降级到 v1.9才能使用。

对于那些不使用 Tailwind CLI 工具（它会自动添加所有供应商前缀）的用户，您可以使用Autoprefixer。

快速演示

是时候实践一下了，我们使用 Tailwind CSS 制作以下按钮。我们来尝试一下：

最终按钮输出

1️⃣填充：首先，我们使用<button>HTML 元素，添加标签并赋予其适当的填充值。这可能与我们通常在 CSS 中的做法有所不同。无需添加自定义高度和宽度值，也无需使用填充值display: block;。我们只需在x和y轴上同时使用填充值即可。

该按钮是矩形的，因此我们可以赋予它x比 更大的 padding 值y。用 Tailwind 的语言来说，px-8 py-4分别是 。

px-8等于padding-left: 2rem; padding-right: 2rem;
py-4等于padding-top: 1rem; padding-bottom: 1rem;

<button class="py-4 px-8">Join now</button>
Enter fullscreen mode Exit fullscreen mode

2️⃣背景：此按钮的背景为蓝色，Tailwind 提供了多种不同的颜色来突出一种颜色。对我们来说，它bg-blue-500很适合，因为它提供了500蓝色的色调。以下是可供选择的背景颜色的完整列表。

色度数越高，颜色越深，反之亦然。

bg-blue-500等于background-color: rgba(99, 102, 241, 1);

输出：

带有填充和背景的按钮

3️⃣圆角：这里我们可以使用rounded-xl或rounded-lg类，它们分别表示“超大圆角”或“大圆角”。第一个类很合适，因此xl似乎是一个不错的选择。

rounded-xl等于border-radius: 0.75rem;

<button class="py-4 px-8 bg-blue-500 rounded-xl">Join now</button>
Enter fullscreen mode Exit fullscreen mode

输出：

圆角按钮

4️⃣文本颜色、变换和粗细：蓝色背景上的黑色文本存在对比度问题。所以我们必须将其更改为白色。对于文本颜色，您可以直接输入text-white。至于将其改为大写，只需使用uppercase实用程序类即可。很简单！

这font-weight不是常规字体，也不是完全粗体。因此，这font-semibold是正确的做法！

text-white等于color: rgba(255, 255, 255, 1);
uppercase等于text-transform: uppercase;
font-semibold等于font-weight: 600;

<button class="py-4 px-8 bg-blue-500 rounded-xl text-white uppercase font-semibold">Join now</button>
Enter fullscreen mode Exit fullscreen mode

输出：

带有文本变换的按钮

5️⃣阴影：最后一步是在按钮周围添加一些阴影。该类shadow-lg提供了按钮所需的适当阴影值。它不是很大，也不是很小。

shadow-lg等于：
box-shadow: --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

<button class="py-4 px-8 bg-blue-500 rounded-xl text-white uppercase font-semibold shadow-lg">Join now</button>
Enter fullscreen mode Exit fullscreen mode

最终输出：

最终按钮输出

就这样！你只需设置一个按钮的样式，无需任何 CSS 代码！最棒的是？你无需离开 HTML 文档，而且创建这样的元素非常快捷方便。

以下是包含响应式实用程序类的完整代码，就像我们在上面的框中所做的那样：

<div class="min-h-screen flex flex-col justify-center">   
    <div class="sm:mx-auto">
        <button class="py-4 px-8 bg-blue-500 rounded-xl text-white uppercase font-semibold shadow-lg">Join now</button>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

结论

在本文中，我们向您介绍了 Tailwind 是什么、它如何为您提供特殊的实用程序类、它的功能以及如何在不离开 HTML 文件的情况下创建自定义按钮元素。

这篇文章旨在帮助初学者快速开启 Tailwind 之旅。希望能够帮助大家快速了解一下这个主题。

下一步是什么？

在 Tailwind CSS 从零到精通系列的下一篇教程中，我们将深入探讨实用优先方法的实际工作原理，以及 Tailwind 如何利用它来创建更具动态性和功能性的元素。敬请期待！

希望你喜欢这些信息。你可以在下方评论区分享你的想法。

现在……一如既往地，享受表情包吧！😆

#DevHumour角落😂

Dev 幽默图片

我之前的一些文章

找到我

推特🐦 Instagram📸 LinkedIn 其他地方🌐

📫 订阅我的每周开发者新闻通讯 📫

本系列的下一篇文章

鏂囩珷鏉ユ簮锛�https://dev.to/vaibhavkhulbe/tailwind-css-from-zero-to-hero-up-and-running-part-1-of-4-an6
Devto 翻译
PREV
没有 CSS 的 Web。😿
NEXT
使用原生 HTML 样式设计你的下一个博客。无需 CSS。😵 new.css new.css