Compile svelte 4 component with tailwind into html + css

[IslamZaoui]

Im trying to render svelte component in a sveltekit endpoint to html for a mail templates
this is my implementation

import type { RequestHandler } from './$types';
import type { ComponentProps, SvelteComponent } from 'svelte';
import Component from '../test/+page.svelte';

interface SvelteRenderResult {
    html: string;
    css: {
        code: string;
        map: null;
    };
    head: string;
}

interface SvelteComponentSSR<T extends SvelteComponent> {
    render: (props?: ComponentProps<T>) => SvelteRenderResult;
}

function unescapeHtml(html: string) {
    return html
        .replace(/&amp;/g, '&')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&quot;/g, '"')
        .replace(/&#039;/g, "'");
}

export const GET: RequestHandler = async () => {
    const result = (Component as unknown as SvelteComponentSSR<SvelteComponent>).render();
    const content = unescapeHtml(`${result.html}<style>${result.css.code}</style>`)
    return new Response(content, {
        headers: {
            'content-type': 'text/plain; charset=utf-8',
        },
    });
};

<script lang="ts">
	import '../../../app.css';
	import { Button } from '@/components/ui/button';
</script>

<main class="flex h-screen items-center justify-center">
	<div class="space-y-4">
		<h1 class="text-3xl font-bold">Hello, world!</h1>
		<p class="text-2xl">this is just a test page</p>
		<Button href="#" class="w-full font-bold">Click me</Button>
	</div>
</main>

the output is just tailwind classes without css:

<main class="flex h-screen items-center justify-center">
   <div class="space-y-4">
      <h1 class="text-3xl font-bold" data-svelte-h="svelte-1a1qrgg">Hello, world!</h1>
      <p class="text-2xl" data-svelte-h="svelte-jp2jzv">this is just a test page</p>
      <a href="#" tabindex="0" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full font-bold" data-button-root="">Click me</a>
   </div>
</main>

<style>
</style>

how I can make the render function compile the tailwind classes?

[Prinzhorn]

That's not something Svelte supports. This is usually achieved using some sort of bundler setup. I would run Tailwind over result.html, there's probably a JS API you can use instead of the CLI.

[nikhil-swamix]

have you tried prerender = true ?