1

How can i style the injected elements in an Astro layout using plain css with tailwind.

Minimum Reproducible example:

/src/layouts/PostLayout.astro

<div class="prose text-white">
<slot/>
</div>

/pages/somepage.mdx

---
layout: ../layouts/PostLayout.astro
---
# Header 1
 Some text

How can i target the markdown elements that are injected into the slot?

I can easily target any of the defined elements that are in the layout using a style block like this:

<style>
    div {
       border: 1px solid black;
    }
</style>

However any styles applied to elements in the slot are ignored.

emg184
  • 850
  • 8
  • 19

2 Answers2

0

<style> elements are scoped by default, to opt out of scoping in the <style> tag you can use Global Styling or the is:global directive. (Reccomended)

Since markdown HTML is generated programmatically the only way to style your markdown using tailwind classes would be

  1. (Reccomended) Tailwind's typography plugin
  2. Remove the default tailwind base using this config option and add your own that includes the @layer and @apply directives
  3. A markdown plugin like rehype-add-classes which allows you to add classes by selector to elements inside your markdown HTML

It is generally recommended to use Global Styling or the typography plugin to style markdown in Astro

Bryce Russell
  • 647
  • 3
  • 8
0

This solution isn't with Tailwind but maybe someone might find it useful

<style is:inline>
    h1 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 2rem;}
</style>
maria
  • 21
  • 2