组件

照片

在数字时代，软件产品的视觉吸引力在塑造用户感知和体验方面起着至关重要的作用。美丽的图像不仅仅是美学选择；它是一种强大的工具，可以显著提升您软件产品的感知质量。

这个孩子像专业人士一样炫耀！

图片来源：Stella Flux

用户与您的软件的第一次互动通常涉及视觉元素。高质量、引人注目的图像可以创造积极的第一印象，为整个用户体验定下基调。

aspectRatio="portrait"

图像具有唤起情感的力量。通过使用与目标受众产生共鸣的图像，您可以建立一种情感联系，从而促进信任和参与。

一致且美观的图像有助于强化您的品牌形象。它传达了您的品牌价值，并使您的产品与竞争对手区分开来，从而让用户更容易记住。

精心选择的图像可以通过引导用户浏览界面、突出关键功能并使软件更直观地导航来提高可用性。

高质量的图像传达了专业性和对细节的关注，这可以增强您产品的可信度。用户更有可能信任和投资看起来精致且制作精良的产品。

position="left" aspectRatio="landscape"

图像可以讲述文字无法表达的故事。它们可以说明复杂的概念、展示产品功能并演示使用案例，使您的软件更具相关性和可理解性。

将美丽的图像融入您的软件产品不仅仅是为了让它看起来更好；而是为了创造一种令人愉悦和吸引人的整体用户体验。通过投资高质量的视觉效果，您可以提升产品的感知质量，并在用户心中留下持久的印象。

健康饮食是改善实验室结果的最快方式。

按钮

集成 Ask Emmo 按钮提供了一种无缝的方式来增强用户参与度和满意度。通过提供直接访问聊天功能的途径，用户可以快速找到问题的答案，从而减少搜索时间并改善整体体验。这种即时访问不仅提高了用户保留率，还促进了个性化互动，让用户感到被重视和理解。这种支持水平建立了对品牌的信任和信誉。

通过阅读按钮链接您自己的内容，您可以增加内容的可见性并引导目标流量，引导用户完成与您的业务目标一致的精心策划的旅程。

引言

在文章中突出引用可以显著提高可读性和参与度。通过强调关键见解，引用使用户能够快速掌握主要思想，而无需阅读每一个字。

它们还可以分隔大块文本，使您的内容在视觉上更具吸引力且更易于浏览。

引用可以捕捉情感，与您的受众建立更强的联系，使您的内容更令人难忘。您还可以结合引用和视觉效果来强化信息。

牛奶对儿童的强健骨骼和成长至关重要。

更多组件

到目前为止，尝试使用 Tailwind 样式化文章、文档或博客文章一直是一项繁琐的任务，需要对排版有敏锐的眼光以及大量复杂的自定义 CSS。

默认情况下，Tailwind 会移除段落、标题、列表等的所有默认浏览器样式。这对于构建应用程序 UI 非常有用，因为您花费的时间更少在撤销用户代理样式上，但当您 确实只是 想要样式化来自 CMS 的富文本编辑器或 Markdown 文件的内容时，这可能会令人惊讶且不直观。

我们实际上收到了很多关于这方面的投诉，人们经常问我们类似的问题：

为什么 Tailwind 会移除我的 h1 元素的默认样式？我该如何禁用它？你是什么意思，我也会失去所有其他基础样式？ 我们听到了，但我们并不认为简单地禁用我们的基础样式是您真正想要的。您不希望每次在仪表板 UI 的某个部分中使用 p 元素时都必须移除烦人的边距。而且我怀疑您真的希望您的博客文章使用用户代理样式——您希望它们看起来 很棒，而不是糟糕。

@tailwindcss/typography 插件是我们试图在不做愚蠢的事情（如禁用我们的基础样式）的情况下，提供您 真正 想要的东西的尝试。

它添加了一个新的 prose 类，您可以将其应用于任何普通 HTML 内容块，并将其变成一个美观、格式良好的文档：

<article class="prose">
  <h1>蒜蓉面包加奶酪：科学告诉了我们什么</h1>
  <p>多年来，父母们向孩子们宣扬吃蒜蓉面包加奶酪的健康益处，这种食物在我们的文化中获得了如此标志性的地位，以至于孩子们经常在万圣节打扮成温暖、奶酪味的面包。</p>
  <p>但最近的一项研究表明，这种备受推崇的开胃菜可能与全国范围内出现的一系列狂犬病病例有关。</p>
</article>

有关如何使用该插件及其包含的功能的更多信息，请阅读文档。

从这里开始可以期待什么

接下来是我写的一些绝对无意义的内容，用来测试插件本身。它包括我能想到的每一个合理的排版元素，比如 加粗文本、无序列表、有序列表、代码块、块引用，甚至斜体字。

涵盖所有这些用例很重要，原因如下：

1. 我们希望一切开箱即用都看起来不错。
2. 真的只有第一个原因，这就是插件的全部意义。
3. 这是一个虚假的第三个理由，因为一个有三个项目的列表看起来比只有两个项目的列表更真实。

现在我们将尝试另一种标题样式。

排版应该很简单

所以这是一个标题——如果我们做得正确，它看起来应该相当合理。

一个明智的人曾经告诉我关于排版的事情是：

如果你不想让你的东西看起来像垃圾，排版非常重要。做好它，它就不会糟糕。

默认情况下，这里的图像看起来也应该不错：

与普遍的看法相反，Lorem Ipsum 并不仅仅是随机文本。它起源于公元前 45 年的一篇经典拉丁文学作品，已有 2000 多年的历史。

现在我要展示一个无序列表的示例，以确保它看起来也不错：

• 这是此列表中的第一个项目。
• 在此示例中，我们将项目保持简短。
• 稍后，我们将使用更长、更复杂的列表项目。

这部分到此结束。

如果我们堆叠标题会怎样？

我们也应该确保它看起来不错。

有时标题会直接彼此相邻。在这些情况下，您通常需要撤销第二个标题的顶部边距，因为标题彼此靠得更近通常看起来比段落后跟标题更好。

当标题出现在段落之后……

当标题出现在段落之后时，我们需要更多的空间，就像我上面提到的那样。现在让我们看看更复杂的列表会是什么样子。

• 我经常这样做，列表项目有标题。

  出于某种原因，我认为这看起来很酷，这很不幸，因为让样式正确非常麻烦。

  我通常在这些列表项目中有两到三段，因此困难的部分是让段落之间、列表项目标题和单独的列表项目之间的间距都合理。老实说，这很难，你可以强烈主张你不应该这样写。

• 因为这是一个列表，我需要至少两个项目。

  我已经在前一个列表项目中解释了我在做什么，但如果只有一个项目，列表就不是列表，我们真的希望它看起来真实。这就是为什么我添加了这个第二个列表项目，这样我在编写样式时实际上有东西可以看。

• 添加第三个项目也不是一个坏主意。

  我认为只使用两个项目可能没问题，但三个肯定不会更糟，而且既然我似乎在编造任意内容方面没有问题，我不妨包括它。

在这种列表之后，我通常会有一个结束语或段落，因为直接跳到标题看起来有点奇怪。

代码默认情况下应该看起来不错。

我认为大多数人会使用 highlight.js 或 Prism 或其他东西来样式化他们的代码块，但即使没有语法高亮，让它们看起来 还可以 也无妨。

以下是撰写本文时默认的 tailwind.config.js 文件的样子：

module.exports = {
  purge: [],
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}

希望这对您来说看起来足够好。

嵌套列表怎么样？

嵌套列表基本上总是看起来很糟糕，这就是为什么像 Medium 这样的编辑器甚至不允许您这样做，但我猜既然你们中的一些人会这样做，我们必须承担至少让它工作的负担。

1. 嵌套列表很少是个好主意。
   • 您可能觉得自己真的很“有条理”或其他什么，但您只是在屏幕上创建了一个难以阅读的丑陋形状。
   • UI 中的嵌套导航也是一个坏主意，请尽可能保持扁平化。
   • 在源代码中嵌套大量文件夹也无济于事。
2. 因为我们需要更多的项目，这里是另一个。
   • 我不确定我们是否会费心样式化超过两级深度。
   • 两级已经太多了，三级肯定是个坏主意。
   • 如果您嵌套四级深度，您应该被关进监狱。
3. 两个项目不是真正的列表，三个项目不错。
   • 再次请不要嵌套列表，如果您希望人们实际阅读您的内容。
   • 没有人想看这个。
   • 我很生气我们甚至不得不费心样式化这个。

Markdown 中列表最烦人的事情是 <li> 元素没有子 <p> 标签，除非列表项目中有多个段落。这意味着我还必须担心样式化这种令人讨厌的情况。

• 例如，这里是另一个嵌套列表。

  但这次有第二段。

  • 这些列表项目不会有 <p> 标签
  • 因为它们每行只有一行

• 但在这个第二个顶级列表项目中，它们会有。

  这尤其令人讨厌，因为这段的间距。

  • 如您在此处所见，因为我添加了第二行，此列表项目现在有一个 <p> 标签。

    顺便说一下，这就是我在说的第二行。

  • 最后这里是另一个列表项目，所以它更像一个列表。

• 一个结束的列表项目，但没有嵌套列表，因为为什么不呢？

最后一句话结束这一部分。

我们需要样式化的其他元素

我差点忘了提到链接，比如这个指向 Tailwind CSS 网站的链接。我们差点让它们变成蓝色，但那太过时了，所以我们选择了深灰色，感觉更有边缘感。

我们甚至包括了表格样式，看看：

我们还需要确保内联代码看起来不错，比如如果我想谈论 <span> 元素或告诉您关于 @tailwindcss/typography 的好消息。

有时我甚至在标题中使用 code

尽管这可能是个坏主意，而且历史上我很难让它看起来不错。但这种 “用反引号包裹代码块” 的技巧确实效果不错。

我过去做的另一件事是将 code 标签放在链接中，比如如果我想告诉您关于 tailwindcss/docs 仓库的事情。我不喜欢反引号下面有下划线，但绝对不值得为避免它而付出疯狂的代价。

我们还没有使用过 h4

但现在我们有了。请不要在您的内容中使用 h5 或 h6，Medium 只支持两个标题级别是有原因的，你们这些动物。我甚至考虑过使用 before 伪元素在您使用 h5 或 h6 时对您大喊大叫。

我们默认情况下根本不对它们进行样式化，因为 h4 元素已经很小，与正文文本大小相同。我们应该对 h5 做什么，让它比正文文本 更小 吗？不，谢谢。

我们仍然需要考虑堆叠标题。

让我们确保我们不会搞砸 h4 元素。

呼，希望我们已经样式化了上面这些标题，它们看起来不错。

让我们在这里添加一个结束段落，以便以一个大小适中的文本块结束。我无法解释为什么我希望事情以这种方式结束，但我必须假设这是因为我认为如果标题离文档末尾太近，事情会看起来很奇怪或不平衡。

我在这里写的内容可能已经足够长了，但添加这最后一句话不会有坏处。

GitHub 风格的 Markdown

我还使用 remark-gfm 添加了对 GitHub 风格 Markdown 的支持。

使用 remark-gfm，我们在 Markdown 中获得了一些额外的功能。例如：自动链接文字。

像 www.example.com 或 https://example.com 这样的链接会自动转换为 a 标签。

这也适用于电子邮件链接：contact@example.com。