在本实验中，你将接触到 Tailwind CSS，一个非常流行的、以工具类优先（utility-first）的 CSS 框架。与编写自定义类（custom classes）的传统 CSS 不同，Tailwind 提供低级别的工具类，你可以直接在 HTML 中组合使用它们来构建任何设计。你将学习如何通过 CDN 设置 Tailwind，并应用基本的工具类来为简单的网页元素设置背景、文本、内边距（padding）和布局。最终，你将亲身体验到以工具类优先的 CSS 的强大和高效。
必要的 index.html 文件已为你创建在 ~/project 目录下。你将专注于修改此文件以应用 Tailwind 样式。
在此步骤中，你将把 Tailwind CSS 添加到你的项目中。为了快速设置和学习目的，最简单的方法是使用 Tailwind CSS CDN。这需要在你的 HTML 文件 <head> 部分添加一个单独的 <script> 标签。
为什么没有 CSS 文件？ 与传统的 CSS 框架不同，Tailwind CSS 是以工具类优先（utility-first）的。你不需要在外部文件中编写 CSS 规则，而是直接在 HTML 中应用预先构建好的工具类。这种方法完全消除了对自定义 CSS 文件的需求。
官方文档： 如需完整的 Tailwind CSS 参考，请访问：https://tailwindcss.com/docs
首先，使用 WebIDE 左侧的文件浏览器打开位于 ~/project 目录下的 index.html 文件。
现在，在你的 index.html 文件的 <head> 部分添加以下 <script> 标签。
<script src="https://cdn.tailwindcss.com"></script>添加该行后，你的 index.html 文件应如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Lab</title>
<!-- Tailwind CSS CDN will be added here -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>Hello, Tailwind!</div>
</body>
</html>按 Ctrl+S 保存文件。虽然你现在还看不到任何视觉变化，但 Tailwind 的工具类已可用于你的项目。你可以打开 Web 8080 标签页来查看未样式化的页面。
在此步骤中，你将应用你的第一个 Tailwind 工具类来更改 <div> 元素的背景颜色。Tailwind 使用 bg-{color}-{shade} 的命名约定来表示背景颜色。
我们将使用 bg-blue-500 类，它会应用一个中等蓝色的背景。
如果 index.html 文件尚未打开，请再次打开它。找到 <div> 元素并为其添加 class="bg-blue-500"。
<div class="bg-blue-500">Hello, Tailwind!</div>现在，你的完整 index.html 文件应如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Lab</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-blue-500">Hello, Tailwind!</div>
</body>
</html>保存文件（Ctrl+S）并切换到 Web 8080 标签页。现在你应该看到文本 "Hello, Tailwind!" 位于一个带有蓝色背景的框内。
与你之前在外部文件中编写 CSS 规则的实验不同，Tailwind 提供了预先构建好的工具类，你可以直接在 HTML 中应用它们。无需编写自定义 CSS——只需组合 bg-blue-500、text-white 和 p-4 等工具类即可构建设计。
主要优势：
在此步骤中，你将更改文本颜色，使其在蓝色背景下更易读。Tailwind 的文本颜色工具遵循 text-{color} 模式。要将文本设置为白色，你将使用 text-white 类。
你可以在 class 属性中用空格分隔多个类，将它们添加到同一个元素上。
修改你 index.html 文件中的 <div> 以包含 text-white 类。
<div class="bg-blue-500 text-white">Hello, Tailwind!</div>class 属性中类的顺序无关紧要。
更改后，你的 index.html 文件 <body> 部分将如下所示：
<body>
<div class="bg-blue-500 text-white">Hello, Tailwind!</div>
</body>保存文件（Ctrl+S）并检查 Web 8080 标签页。文本 "Hello, Tailwind!" 现在应该是白色的，与蓝色背景形成了更好的对比。
在此步骤中，你将为 <div> 元素添加一些内部间距，即内边距（padding）。这将防止文本接触到蓝色框的边缘。Tailwind 提供了 p-{size} 格式的内边距工具类。
我们将使用 p-4 类，它会为元素的四个边应用中等量的内边距（默认值为 1rem 或 16px）。
在 index.html 文件中，将 p-4 类添加到 <div> 元素的 class 属性中。
<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>你的 index.html 文件 <body> 部分现在应该是：
<body>
<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>保存文件（Ctrl+S）并刷新 Web 8080 标签页。你会注意到文本和蓝色框边框之间现在有了间距，这使得设计看起来更整洁。
在最后一步中，你将把样式化的 <div> 元素在页面上居中。你可以使用 Tailwind 的 Flexbox 工具类来实现这一点。
为此，你将把类应用到 <body> 标签上，使其成为一个 flex 容器并居中其内容。
flex: 这个类将 display: flex 应用到元素上。justify-center: 这个类沿着主轴（默认是水平方向）居中 flex 项目。h-screen: 这个类将元素的高度设置为视口高度的 100%，这对于垂直居中是必需的（尽管我们这里只做水平居中，但对于全页布局来说，这是一个好习惯）。修改你 index.html 文件中的 <body> 标签以添加这些类。
<body class="flex justify-center h-screen">
<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>你完整的 index.html 文件现在看起来是这样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Lab</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center h-screen">
<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>
</html>保存文件（Ctrl+S）并在 Web 8080 标签页中查看结果。你的样式化框现在应该在页面上水平居中了。
恭喜你完成了本次实验！你已成功迈出了 Tailwind CSS 的第一步。在本次实验中，你学习了如何使用 CDN 将 Tailwind 集成到 HTML 文件中。然后，你通过直接将多个类应用到 HTML 元素上，实践了 utility-first 框架的核心概念。你现在已经熟悉了如何使用工具类来设置背景颜色（bg-blue-500）、文本颜色（text-white）、内边距（p-4）以及 Flexbox 布局（flex、justify-center、h-screen）。这些基础知识将帮助你快速、一致地构建更复杂和响应式的设计。
