为什么 1 级标题与其他标题大小相同？

Question

我刚刚创建了一个新的 React 应用程序并安装了 tailwindcss 和 antd 库。由于某种原因，我的标题标签没有更改字体。我的代码是：

import { Button } from "antd";

function PageHeader() {
  return (
    <>
      <div className="flex flex-wrap">
        <h1 className="p-5">Hello</h1>
      </div>
    </>
  );
}

export default PageHeader;

然而，字体大小完全没有改变，仍然是小如一个

标签。

Answer 1

默认情况下，所有标题元素都是完全无样式的，并且具有与普通文本相同的字体大小和字体粗细。

这样做的原因有两个：

它可以帮助您避免意外偏离字体比例。默认情况下，浏览器为 Tailwind 的默认字体比例中不存在的标题指定大小，并且不保证在您自己的字体比例中存在。

在 UI 开发中，标题通常应该在视觉上不被强调。默认情况下使标题无样式意味着您应用到标题的任何样式都是有意识且故意发生的。

https://tailwindcss.com/docs/preflight#headings-are-unstyled

对于那些因没有从为此目的而实现的标题元素中获得所需样式而感到失望的人，可访问性和可用性最佳实践要求您使用标题进行结构，而不是样式。如果您所追求的只是视觉强调，请使用 CSS（通过库提供的类或自定义类）。