What is the best way to style my Markdown files using TailwindCCS (consistent across all files)?
#What is the best way to style my Markdown files using TailwindCCS (consistent across all files)?
fierce flume
dreamy trellis
You can specify a layout manually in your MDX files: https://docs.astro.build/en/core-concepts/layouts/#importing-layouts-manually-mdx
If you do that, you have tons of power. You could have they layout import a custom Tailwind stylesheet that defines all your styles in the base layer.
If you want to use the same layout as your non-MD files, you could have the layout check for Astro.props.frontmatter as a way of determining whether it's rendering a markdown page, then add a class to the <html> element and have the class trigger some styles in the components Tailwind layer:
// src/layouts/base.astro
---
import "../styles/main.css"
const { frontmatter } = Astro.props
const htmlClass = frontmatter ? 'markdown' : null
---
<html class={htmlClass}>
// src/styles/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
html.markdown {
h1 { @apply text-4xl; }
}
}
I would not like to have to edit every MarkDown file. I just want all of the MarkDown files in the same content collection styled the same. So: H1 is big, spacing between paragraphs, links are underline, ...
fierce flume
See screenshot attached, everything around the content is nicely formatted, but the content from the .md file is not. "Expoloring the city center ..." is in h2 tags but it's not formatted. How can I added tailwind classes to it and make sure that whenever I use ## in Markdown it is styled everywhere the same.
This is my current code:
---
import Header from "../components/Header.astro";
import { getCollection } from 'astro:content';
// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
const blogEntries = await getCollection('blog');
return blogEntries.map(entry => ({
params: { slug: entry.slug }, props: { entry },
}));
}
// 2. When it's time to render, you can get the entry directly from the prop
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{entry.data.title}</title>
</head>
<body>
<Header />
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 p-4">
<h1
class={`text-4xl font-semibold mt-12 mb-2 text-teal-800`}
>
{entry.data.title}
</h1>
<div>
<Content />
</div>
</main>
</body>
</html>
glossy needle
you're looking for tailwind typography https://tailwindcss.com/docs/typography-plugin
Tailwind preflight removes styles applied to rendered .md. The typography plugin provides utility classes with some sane defaults for that.
fierce flume
That was exactly what I needed, works like a breeze. Thanks!