Assigning Default Custom Components to HTML Elements in Astro
I'm using tailwind in Astro with mdx content so I want to setup default tailwind classes for the HTML rendered from markdown.
I've switched from file based routing to dynamic routes like this: https://docs.astro.build/en/guides/markdown-content/#example-dynamic-page-routing
So I can then set my custom components in one place like this: https://docs.astro.build/en/guides/markdown-content/#custom-components-with-imported-mdx
Ideally I would like to be able to pass props into the components when I set them up so I can use a generic
Heading
component that takes a size prop to render as H1, H2, H3, etc...
Anyone tried to do something similar? I'm not especially attached to this approach, it just felt natural coming form React, happy to hear other solutions to setting up default tailwind classes for markdown content4 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
That's good, I think that's kind of what I'm doing already. This works fine for my link components which don't have variants passed as a prop, however I was hoping to be able to create a
Heading
component which would take a prop like size
or level
which I could use to set the heading level. Something like this:
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Damn, yeah I was hoping there would be a nicer way of doing that without having to create a separate astro component for each one.
The @apply tailwind classes approach is used in the t3 docs site, I might just go that approach by wrapping all mdx content in a
.markdown
class and then in a global.css file doing this:
etc...
Writing an astro component for each one feels like way too much boilerplate when all I'm wanting to do is add some class names