Theo's Typesafe Cult•2y ago

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 content

4 Replies

Unknown User•2y ago

Message Not Public

robOP•2y ago

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:

<Content
  components={{
      h1: ()=>(<Heading as="h1" />),
      h2: ()=>(<Heading as="h2" />),
    }}
/>

<Content
  components={{
      h1: ()=>(<Heading as="h1" />),
      h2: ()=>(<Heading as="h2" />),
    }}
/>

Unknown User•2y ago

Message Not Public

robOP•2y ago

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:

.markdown h1 {
  @apply mt-8 mb-4 text-3xl font-extrabold;
}
.markdown h2 {
  @apply mt-8 mb-4 text-2xl font-semibold;
}

.markdown h1 {
  @apply mt-8 mb-4 text-3xl font-extrabold;
}
.markdown h2 {
  @apply mt-8 mb-4 text-2xl font-semibold;
}

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

Gaming

Programming

Assigning Default Custom Components to HTML Elements in Astro