Svelte email Tailwind
React Email was surprisingly revolutionary in the front-end world. When I used the Svelte-equivalent, there was one quirk: the long list of style objects would quickly rack up at the expense of the developer-experience. Tailwind seemed like a good alternative. Unfortunately, unlike React Email, Svelte didn’t have a Tailwind integration.
Process & solution
At first I built a runtime converter of Tailwind classes to inline styles. That convertion processs took place every time a unique email was sent. Not very efficient… So, I looked into how Svelte generates SSR code to hopefully recognize patterns. Why? Because that would allow me to manipulate the source code of email components on compile-time (using a Vite plugin) instead of run-time.
What that practically implies? Code has to run only once (when your site goes live), instead of everytime a unique email is sent. I successfully identified those patterns in Svelte 4 and luckily, the transition to Svelte 5 was not too difficult. The result: a vite plugin that handles Tailwind processing for you; and a UI to see your emails while developing, exactly as they will be in your inbox.