In a previous post, we covered how to render Markdown content as HTML using the marked library. While the content is now displayed correctly, it still lacks the proper styling you would expect, such as larger fonts for headings and bullet points for lists. To style this HTML properly, we can use a Tailwind CSS plugin called typography.
What is Tailwind CSS Typography?
The Tailwind CSS Typography plugin provides a CSS class called prose that can be used to style external HTML, such as content rendered from Markdown or pulled from a CMS. This class applies sensible default styles to HTML elements, making your content look great with minimal effort.
Installing the Typography Plugin
First, let's install the Typography plugin. Open your terminal, stop your development server if it's running, and run the following command:
npm install @tailwindcss/typography --save-devThis command installs the Typography plugin as a development dependency.
Configuring Tailwind to Use the Plugin
Next, we need to configure Tailwind CSS to use the Typography plugin. Open your tailwind.config.js file and add the plugin to the plugins array:
// tailwind.config.js
module.exports = {
// ...
plugins: [
require('@tailwindcss/typography'),
],
};Applying the prose Class
With the plugin installed and configured, we can now apply the prose class to the HTML content generated from Markdown. Update your component to include this class:
// app/StardewValleyPage.jsx
import { readFile } from 'node:fs/promises';
import { marked } from 'marked';
import Heading from '@/components/Heading';
export default async function StardewValleyPage() {
const text = await readFile('./content/reviews/stardew-valley.md', 'utf8');
const html = marked(text);
return (
<>
<Heading>Stardew Valley</Heading>
<img src="/images/stardew-valley.jpg" alt="Stardew Valley" width="640" height="360" className="mb-2 rounded" />
<article dangerouslySetInnerHTML={{ __html: html }} className="prose" />
</>
);
}Explanation of the Code
Importing marked: Converts Markdown to HTML.
Reading the File: Reads the Markdown file.
Converting Markdown: Uses marked(text) to convert Markdown to HTML.
Rendering HTML: Uses the dangerouslySetInnerHTML prop to render the HTML content inside an <article> element with the prose class.
Customizing Typography Styles
The Typography plugin also allows for some customization. For instance, you can change the color scheme to match the rest of your website. Let's update our article element to use a different color scale:
<article dangerouslySetInnerHTML={{ __html: html }} className="prose prose-slate max-w-screen-sm" />In this example, we used the prose-slate class, which applies a slate color scheme to the text. Additionally, we set the maximum width to screen-sm to make the text as wide as the image above it.
Applying Consistent Styles
To ensure consistency across your website, you can use the same color scheme in other parts of your site. For example, update the footer text color to match the slate color scheme:
// app/RootLayout.jsx
export default function RootLayout({ children }) {
return (
<div className="flex flex-col min-h-screen">
<main className="grow py-3">{children}</main>
<footer className="border-t py-3 text-center text-slate-500 text-xs">
Game data and images courtesy of{' '}
<a href="https://rawg.io/" target="_blank" className="text-orange-800 hover:underline">
RAWG
</a>
</footer>
</div>
);
}Conclusion
By following these steps, you can use the Tailwind CSS Typography plugin to style HTML content generated from Markdown. This approach ensures your content looks polished and consistent with the rest of your website with minimal effort.
The Typography plugin provides a robust set of default styles, but it also offers customization options to fit your specific needs. Whether you're rendering Markdown content or pulling HTML from a CMS, the Typography plugin makes it easy to apply beautiful, consistent styles.
Happy coding!
Comments