您能否在服务器端为sendgrid电子邮件API呈现一个svelte组件并包括Tailwind排版CSS？

Question

是否有可能呈现一个svelte组件服务器端，并将具有匹配CSS的HTML发送到Sendgrid？我的用例是，当我的应用程序中出现新的评论时，我想发送一封自动生成的电子邮件。评论将是丰富的文本。

我发现我可以相对容易地用服务器端组件API。呈现组件

我的问题是注释字段是使用顺风CSS排版插件样式的富文本。

<p
        class="prose prose-sm prose-p:my-1 after:empty:prose-p:content-['\00A0'] prose-a:cursor-pointer prose-a:text-indigo-600 hover:prose-a:text-indigo-900 prose-table:m-0
        prose-table:w-full prose-table:table-fixed prose-table:border-collapse prose-table:overflow-hidden
        prose-th:relative prose-th:box-border prose-th:border prose-th:border-gray-300 prose-th:bg-gray-100 prose-th:py-0.5
        prose-th:px-1 prose-th:font-bold prose-td:relative prose-td:box-border prose-td:border prose-td:border-gray-300 prose-td:py-0.5 prose-td:px-1
        dark:prose-invert
        dark:prose-a:text-green-400 
        dark:hover:prose-a:text-green-200 dark:prose-th:border-gray-600 dark:prose-th:bg-gray-700 dark:prose-td:border-gray-600">
        {@html html}
    </p>

当我呈现服务器端时：

const { head, html, css } = App.render(//);

我没有得到相应的CSS。这有可能吗？

Answer 1

在该方法的结果中不会得到任何CSS，因为您没有在该组件中编写任何CSS，只有HTML和一堆类名。

当发送HTML电子邮件时，当将CSS内联到标记中时，也会得到最好的结果。有一个名为斯维尔特-邮件的Svelte插件似乎可以做到这一点，尽管我不能保证它能与Tailwind一起工作得有多好。

或者，似乎有一个项目，梅尔风，它将使用一个用Tailwind编写的HTML页面，并为您内联CSS。也许这是一种您可以采取的方法，从您的模板流水线，通过Svelte，然后Mailwind。

我肯定还有其他的项目也有其他的解决方法，但这就是我到目前为止所发现的。