Tailwind 4 very slow in a Svelte app

[ff-ils]

I migrated a Svelte application to Tailwind 4, using @reference where needed in <style> blocks, nearly 50 components. I have a base css that imports tailwind css, an external theme and some custom utility classes. It is referenced as

<style lang="postcss">
	@reference "$lib/styles/app.css";

Now building the app is very slow, times doubled from less than 30 seconds to more than 60, but even during development a change to a utility class is applied to the web page after many seconds. I read that for every @reference the full css is rebuilt and the use of <style> blocks is discouraged (I do not agree with that, in Svelte this is a fundamental concept), but the whole process seems really too slow. Has anyone a suggestion to speed things up?

[wongjn]

You could consider not using @reference at all. Assuming you added these to use @apply, consider instead using Tailwind class names in the markup, as recommended by Adam Wathan (creator of Tailwind).

As per the aforementioned Twitter thread, using <style> blocks is discouraged when using Tailwind. They are a fundamental concept in Svelte but does not mean you must use them - indeed it may be to your detriment in using them with Tailwind, as you have found out. You'll get smaller CSS files and better dev and build performance using class names inline in the markup. <style> blocks are useful for CSS encapsulation, but this is not needed in Tailwind, since the class names mean the same thing in any place it is used.

Edit

#17836 may improve performance in this case.

[pepa-linha]

Unfortunately, after the update to Tailwind 4 in SvelteKit, it is not very usable. DX is very weak, you have to write @reference everywhere, very slow build and writing classes inside HTML is not a solution, because the CSS is reduced, but the HTML size increases. The CSS file is cached, but the HTML is not, so the data transfer is higher as a result.

Tailwind in combination with @apply is nice to use, but if it makes DX worse, I will probably be forced to stop using it.

[ff-ils]

I tried the workaround suggested here #17693 and it seems to work in my case. Build time is halved and during development HMR is almost as fast as before. So this is possible. I think this should be applied automatically by Tailwind when using @reference.

[paf-vaibhav]

I am facing same issue. Workaround suggest by @ff-ils is not working (doesn't seem to be a valid syntax). Manually replacing all occurrences of @apply to not use @reference is not feasible as there are over 600 occurrences of @apply in my project and I added @referece using a script to make them work. Has anyone managed to fix it ?

[ff-ils]

This is my configuration:

/* svelte.config.js */
import { sveltePreprocess } from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
[...]
	preprocess: sveltePreprocess({
		postcss: {
			prependData: '@reference "$lib/styles/app-reference.css";',
		},
	}),
[...]
};

I use svelte-preprocess in order to add @reference automatically.
Then, my .css files are:

/* /src/lib/styles/app.css */

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@import "./common.css";

app.css is imported by the root +layout.svelte file.

/* /src/lib/styles/app-reference.css */

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme) source(none);
@import "tailwindcss/utilities.css" layer(utilities) source(none);

@import "./common.css";

and common.css contains my custom theme, some global classes and Tailwind utilities.

[pepa-linha]

Thank you so much, splitting the files and loading a different one for @reference really helps. Writing @reference can also be skipped thanks to svelte-preprocess, but then PhpStorm shows an error for every @apply. It’s probably possible to ignore that, but in the end, I’ll manage without svelte-preprocess.

[ff-ils]

Latest release 4.1.6 includes #17836 that solves the problem. I rolled back the workaround and build times are ok.