Style HTML from Markdown in Next.js with Tailwind CSS and TinaCMS

To style the HTML content from Markdown files in a Next.js app with Tailwind CSS and TinaCMS, you can use Tailwind's utility classes along with a tool like @tailwindcss/typography to apply styles to the Markdown-generated HTML content. Here’s a step-by-step guide:

1. Install Necessary Packages

Make sure you have @tailwindcss/typography installed in your Next.js project:

npm install @tailwindcss/typography

2. Configure TailwindCSS with the Typography Plugin

Add the typography plugin to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/typography")], //add
};

This plugin provides a prose class with predefined typography styles that can be customized.

3. Wrap Markdown Content in a prose Class

In the component where you render the HTML from your Markdown content, wrap the content in a prose container. For example:

<section className="prose dark:text-white">
  {/* Content Section */}
  <div>
    {projects?.body ? (
    <TinaMarkdown content="{projects.body}" components="{components}" />
    ) : (
    <p>No content available.</p>
    )}
  </div>
</section>

4. Customize Typography Styles (Optional)

If you want to customize the typography styling, you can do this in the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: "#333",
            h1: { color: "#1a202c" },
            a: {
              color: "#3182ce",
              "&:hover": { color: "#2c5282" },
            },
          },
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};