为什么 h1 标签在 React/nextjs 中呈现正常大小的文本？

Question

在我的 React 应用程序中，无论我在哪里放置 h1 标签，它都只显示普通字体。检查时我发现我的文本呈现为 h1 但 h1 的样式是

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

我还尝试在我的 global.css 中更改此设置

h1{
    font-size: large;
    font-weight: 900;
}

但这没有用。那么如何将 h1 渲染为标题 1 文本和字体大小

Answer 1

这可能是因为您使用的是 Tailwind 基本样式。

检查您的主 .css 文件。您应该在顶部看到以下内容：

@tailwind base;
@tailwind components;
@tailwind utilities;

这会在 CSS 中加载一组预配置的基本样式，并包括无样式的标题。

您可以在此处阅读有关 Tailwind 基本样式带来的所有样式更改及其原因https://tailwindcss.com/docs/preflight。