CODEWITHSUNDEEP
csstailwind-cssastrojs
emg184
emg184

Reputation: 1010

How to style slot elements in Astro with Tailwind

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.

Upvotes: 6

Views: 5208

Answers (3)

MichalRsa
MichalRsa

Reputation: 360

Quoting Astro docs:

Scoped Styles

https://docs.astro.build/en/guides/styling/#scoped-styles

Astro CSS rules are automatically scoped by default. Scoped styles are compiled behind-the-scenes to only apply to HTML written inside of that same component. The CSS that you write inside of an Astro component is automatically encapsulated inside of that component.

Global Styles

https://docs.astro.build/en/guides/styling/#global-styles

Astro CSS rules are automatically scoped by default. Scoped styles are compiled behind-the-scenes to only apply to HTML written inside of that same component. The CSS that you write inside of an Astro component is automatically encapsulated inside of that component.[...] Global Styles While we recommend scoped styles for most components, you may eventually find a valid reason to write global, unscoped CSS. You can opt-out of automatic CSS scoping with the <style is:global> attribute.

Add style tag in your file, with a is:global directive:

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

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

If you prefer using tailwind classes:

https://tailwindcss.com/docs/functions-and-directives#apply

<style is:global>
  div {
    @apply border-2 border-black;
  }

</style>

Upvotes: 2

Maria
Maria

Reputation: 141

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>

Upvotes: 2

Bryce Russell
Bryce Russell

Reputation: 1360

<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

Upvotes: 0

Related Questions