#css in markdown

5 messages · Page 1 of 1 (latest)

keen girder
#

I'm building a website using the docs template and since I am using tailwind, I would like to be able to apply styles to markdown elements. I am familiar with this from jekyll and kramdown but this is my first exposure to rehype and remark. Are there plugins or something to allow me to add css syles to elements to effectively use tailwind or what do people typically do in this situation?

inner solar
#

The most common pattern is to wrap the Markdown content with Tailwind Typography’s prose class to get basic HTML styling on plain elements (https://tailwindcss.com/docs/typography-plugin). The other option if you want to stick to custom styles is to write your own styles in a layout:

<div class="content">
  <slot />
</div>

<style>
/* use standard CSS */
.content :global(p) {
  color: red;
}
/* or use Tailwind to write the CSS for you */
.content :global(p) {
  @apply text-red;
}
</style>

There’s some more links and information in the docs: https://docs.astro.build/en/guides/styling/#markdown-styling

Astro Documentation
Styles & CSS

Learn how to style components in Astro with scoped styles, external CSS, and tooling like Sass and PostCSS.

fathom bane
keen girder
#

so there is nothing similar to kramdown where you can apply styles inline with {. styles}?

keen girder
#

I suppose I can also maybe write some content as html and astro will still load it?