Can you server side render a svelte component and include Tailwind CSS typography CSS for the sendgrid email API?

user_3694288 0
Viewed 171

Is it possible to render a svelte componet server-side, and send the HTML with matching CSS to Sendgrid? My use case is that I would like to send an auto-generated email when a new comment is made in my app. The comment would be rich-text.

I found out that I can relatively easily render a component with the Svelte Server-side component API.

My problem is that the comment field is rich-text, styled with Tailwind CSS typography plugin:

<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>

When I render server side:

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

I don't get the corresponding CSS. Is this even possible ?

tailwind-css svelte sendgrid html
1 Answers

You won't get any CSS in the result of that method because you haven't written any CSS in that component, only HTML and a bunch of class names.

When sending HTML emails, you also get the best results when inlining CSS into the markup. There is a Svelte plugin called svelte-mail that seems to do this, though I can't promise how well it would work with Tailwind.

Alternatively, there seems to be a project, Mailwind, that will take an HTML page written with Tailwind and inline the CSS for you. Perhaps that is an approach you could take, pipelining from your template, through Svelte, then Mailwind.

I'm sure there are other projects out there that have other approaches to this, but that's what I've found so far.

user_283760
Related