概述

我们将快速演示如何为一个名为 NorthBy 的音乐会系列的示例页面设计英雄区域。代码中的示例页面展示了所有版本依次排列。这仅仅是服务器应用公共 HTML 中的一个页面，因此无需解释服务端信息。

以下是我们的第一个版本：

我们应看到文本没有任何样式应用，甚至没有通常与 HTML h1 标签关联的默认字号和加粗样式。

Tailwind 特性

让我们在代码和视图之间来回切换，开始使用 Tailwind 添加功能。我们不会深入探讨语法或其他选项。我们的目标是在课程形式下尽可能真实地呈现使用 Tailwind 的体验。

image_pack_tag 方法是 Rails 和 Webpacker 的特性。我们的构建系统可能有其他方式访问文件的 URL。例如，使用 Webpack 的 JavaScript 文件通常可以将文件作为模块导入，并将导入的值用作 URL。

以下是实现基本布局（包含文字、副标题和 logo）的第一版：