如何在Astro中使用Tailwind设计插槽元素

Question

如何在Astro布局中使用纯css和tailwind来样式化注入的元素

最小可复制示例:

/src/布局/PostLayout.astro

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

/页面/somepage.mdx

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

如何定位注入到槽中的markdown元素?

我可以很容易地定位任何定义的元素，在布局中使用像这样的样式块:

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

但是，任何应用于slot中的元素的样式都将被忽略。

Answer 1

这个解决方案不是Tailwind，但也许有人会发现它很有用

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

Answer 2

<style>元素默认是有作用域的，要想退出<style>标签的作用域，你可以使用全局样式或is:global指令。(推荐)

由于markdown HTML是通过编程方式生成的，所以使用顺风类来样式化markdown的唯一方法是

1. (推荐)Tailwind的排版插件
2. 使用此配置选项删除默认的顺风基础，并添加您自己的，包括@layer和@apply指令
3. 一个像rehyp -add-classes这样的markdown插件，它允许你通过选择器向markdown HTML中的元素添加类

一般建议使用全局样式或排版插件来样式化Astro

中的标记