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).
Interestingly, when checking the font via the VSCode Preview extension, the font style has visibly changed:
Is there something crucial that I might be overlooking in this setup?