I've been working on parsing an MDX file and converting it into React components.
My tech stack includes TailwindCSS, Next.js, and React. Following the Tailwind documentation, I have installed the tailwind/typography plugin.
In my tailwind.config.js file:
plugins: [require('@tailwindcss/typography'), require('@tailwindcss/aspect-ratio'), require('tailwindcss-textshadow')]
Within the globals.css file:
@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;
}
Then, in my Blog function, I utilize MDXRemote to render HTML elements.
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 an example of my MDX file content:
---
title: Example Post
description: '',
date: '2022-01-30'
image: '/images/hello.jpg'
---
# Heading
### This is an example blog post with React components.
However, when rendered, the custom h1/h2 heading styles are not applied, and instead, it displays as static 16px text (which appears to be the default font style for Tailwind).
https://i.sstatic.net/CEi3x.jpg
Interestingly, when checking the font via the VSCode Preview extension, the font style has visibly changed: https://i.sstatic.net/70gfr.png
Is there something crucial that I might be overlooking in this setup?