Tailwind Typography plugin doesn't change font style of heading tags from default size

Question

I am trying to parse an MDX file and convert it into React components.

I'm using TailwindCSS, Nextjs, React - as Tailwind documentation illustrates, I installed tailwind/typography plugin.

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;
    }

and then in my Blog function I use MDXRemote to render HTML Element.

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>
    )
}

This is my example MDX file.

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

# Heading

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

As you can see from this screenshot, it doesn't render with custom h1/h2 heading font style, but static 16px text. (I think this is the default font style for Tailwind).

When I check the font from VSCode Preview extension, I can clearly see the font style has changed.

Is there any thing I am missing?

Answer 1

Add these lines to your CSS , you can also manipulate them according to your needs-

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