Tailwind Typography 插件不会从默认大小更改标题标签的字体样式答案

【问题标题】：Tailwind Typography plugin doesn't change font style of heading tags from default sizeTailwind Typography 插件不会从默认大小更改标题标签的字体样式
【发布时间】：2022-04-03 16:34:11
【问题描述】：

我正在尝试解析 MDX 文件并将其转换为 React 组件。

我正在使用 TailwindCSS、Nextjs、React - 正如 Tailwind 文档所示，我安装了 tailwind/typography 插件。

tailwind.config.js

plugins: [require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio'), require('tailwindcss-textshadow')]

globals.css

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

@layer base {
    h1 {
        @apply mb-6 text-3xl font-semibold;
    }
    h2 {
        @apply text-2xl font-semibold;
    }
    p {
        @apply mb-4;
    }
    a {
        @apply text-blue-500 hover:text-blue-400 dark:text-blue-400 dark:hover:text-blue-300;
    }

然后在我的博客函数中，我使用 MDXRemote 来呈现 HTML 元素。

export const Blog = ({ source, frontMatter }: BlogInput) => {
    return (
            <article className="prose">
                <h2>This should have H2 heading style!</h2>
                <div className={s.title}>{frontMatter.title}</div>
                <div>{format(parseISO(frontMatter.date!), 'MMMM dd, yyyy')}</div>
                <div className="">
                    <MDXRemote {...source} components={components} />
                </div>
            </article>
    )
}

这是我的示例 MDX 文件。

---
title: Example Post
description: '',
date: '2022-01-30'
image: '/images/hello.jpg'
---

# Heading

### This is an example blog post with React components.

从这个屏幕截图中可以看出，它没有使用自定义 h1/h2 标题字体样式呈现，而是使用静态 16 像素文本。（我认为这是 Tailwind 的默认字体样式）。

当我从 VSCode Preview 扩展中检查字体时，我可以清楚地看到字体样式发生了变化。

我有什么遗漏的吗？

【问题讨论】：

你能给我们看完整的tailwind.config.js文件吗？
你发现了吗？我也有同样的问题。

标签： html css reactjs next.js tailwind-css

【解决方案1】：

将这些行添加到您的 CSS 中，您也可以根据需要对其进行操作-

h1 {
    @apply text-3xl;
}
h2 {
    @apply text-2xl;
}
h3 {
    @apply text-xl;
}
a {
    @apply text-blue-600 underline;
}

【讨论】：