How would I add styling to all markdown using the same layout? I can't add it to the layout because that doesn't apply to children and I don't want it to be global.
#How to add styling to markdown
trim trellis
violet thorn
I'm not exactly sure what you mean when you said that adding styling to the layout doesn't apply to children, but this is how I style my markdown with Tailwind: Create a custom class in your Tailwind.css file, and then apply that anywhere you use Markdown.
tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.markdown-prose {
@apply prose md:prose-lg lg:prose-xl max-w-none dark:prose-invert;
}
}
BlogLayout.astro
---
const { frontmatter } = Astro.props
---
<h1>{frontmatter.title}</h1>
<!-- add custom markdown-prose class to wrapper div -->
<div class="markdown-prose">
<!-- Markdown is rendered to the slot below -->
<slot />
</div>
Let me know if this doesn't fit what you're trying to do though!
trim trellis
Hi. I’m not that familiar with tailwind and css in general. How would I use this to style all <p> tags in the markdown file?
violet thorn
Sorry -- my approach uses the Tailwind Typography plugin (https://tailwindcss.com/docs/typography-plugin#installation), which applies (opinionated) styling and is a quick but less easily customizable method.
If you want to style each element individually, you will want to probably use the @layer and @apply functionalities to define a full set of styles for children of the parent element styled by your custom class:
tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.markdown {
*/ Any class-wide rules defined here... /*
}
.markdown > p {
@apply text-3xl font-bold;
}
}
trim trellis
This doesn't seem to work. Give the following style:
<style>
@tailwind components;
@layer components {
.article > p {
margin-top: 100px;
}
}
</style>
no margin is added to the paragraphs, but give the following:
<style>
@tailwind components;
@layer components {
.article {
margin-top: 100px;
}
}
</style>
a margin is added to the div
violet thorn
Can you share your layout file?
violet thorn
So I think you should apply the style not to the <article> element's children, but to the wrapper div right before the <slot />
trim trellis
I also tried that
violet thorn
Hmm, this seems to work when defined in a Tailwind.css file but not in <style> declarations 
violet thorn
Aha
Check this out: https://docs.astro.build/en/guides/styling/#global-styles
You can also mix global & scoped CSS rules together in the same <style> tag using the :global() selector. This becomes a powerful pattern for applying CSS styles to children of your component. [...] This is a great way to style things like blog posts, or documents with CMS-powered content where the contents live outside of Astro.
I think you should be able to do something like this:
<style>
@tailwind components;
@layer components {
.article :global(p) {
margin-top: 100px;
}
}
</style>
But I see here that you are using the Tailwind prose class -- if you just want to change the margin-top for <p> elements in your Markdown, you can use the tailwind element modifier (https://tailwindcss.com/docs/typography-plugin#element-modifiers) prose-p:mt-2.
trim trellis
Thank you. I’ll test it tomorrow. This is the first time I’ve really used tailwind (or any styling at all) so It’s really learning as I go
unique blaze
As an idea, what I've done recently is create a base layout with the main stuff like nav banners and a base style (resets etc), then a sub-layout for the markdown files which imports it's own sass file. If I need another type of markdown file with different styling, I'd create a new sub-layout and import a different sass file in that one. This method has worked for a recent work project I've been playing with.
Admittedly I'm doing nothing overly complicated with the styling for this though, and it includes components (an mdx file) which then have their own overrides.
Oh, also this is not tailwind, just sass (I've never really played with tailwind)