CSS Tailwind slow build time even with different files...

[frederikhors]

I'm using Tailwind with default Svelte template and svelte-preprocess.

When I modify a single css the build is very slow (~10 seconds).

I read this: https://nystudio107.com/blog/speeding-up-tailwind-css-builds but I can't make it work with svelte-preprocess.

Also with different .css files imported in one App.svelte file when modifying just one of it (the lighter one, not the one with tailwindcss/utilities in it) the build is of the same time.

Why?

Thanks for your precious work.

[acoyfellow]

Tailwind 2.0 has crushed my development flow. Startup time has 50x'd, and my dev server is running out of memory and crashing in new ways I've yet to see.

[kaisermann]

Hey @frederikhors 👋 Could you provide a minimal repro? Would help a lot 😁

[natecorkish]

Hey @frederikhors 👋 Could you provide a minimal repro? Would help a lot 😁

@kaisermann

https://github.com/natecorkish/frontend-svelte/

Checkout to 7b7f13e7dea17e6421c38fc7e8b51a02197e2493 which has an inline tailwind stylesheet. You should get the same issue as the original poster.

[dionysiusmarquis]

I tested some scenarios always copy pasted the generated css coming from @tailwind base; … into a <style global>…:
Default sapper template with rollup: "vanilla" ~2s with prebuilt tailwind css ~26s
Typescript sapper template with rollup: "vanilla" ~4s with prebuilt tailwind css ~39s

When also using postcss and not a prebuilt css I'll have ~1m

I'd say one of the main problems is that svelte already processes the whole tailwind css as it where "handwritten". An option to skip the whole processing part for a specific <script> inside a .svelte file could help e.g.

[dionysiusmarquis]

After I investigated this deeper in the context of sapper. I found out that it's not wrong to consider it as bad practice to import styles inside <style> rather than <script> (following: sveltejs/svelte#5745).
My conclusion is that you should most likely never add heavy "third party" css to svelte's <style> content. It's preferable to import them inside <script> and add the corresponding rollup plugins or webpack loaders to handle .css, .pcss imports.
This way you have better control of which styles are actually svelte component's css that should be processed by svelte and which styles are (in terms of Tailwind even pretty heavy) "third party" styles, that aren't bound to any specific svelte component. You just have to remember to also add a css minifier and enable tailwind purge to prod postcss

❗ (even though it's done this way in quite a lot blog posts regarding Tailwind in svelte)

<styles global lang="postcss">
  @import 'src/styles/tailwind.pcss'
…

✅

<script>
  import 'src/styles/tailwind.pcss'
…

[frederikhors]

@dionysiusmarquis does this solve the problem?

[dionysiusmarquis]

Only tested it in the context of sapper and I'm down to ~5s per tailwind.pcss change after moving the imports to script. With style imports it was at >1m.
So for me it was a huge build time decrease. And that makes total sense, as svelte and svelte-preprocess don't need to "mess with" the Tailwind styles at all anymore.

[frederikhors]

@dionysiusmarquis what rollup's plugin are you using for .pcss?

[frederikhors]

@dionysiusmarquis can you share a gist for us, please?

[non25]

This has nothing to do with svelte-preprocess.
Here's the wasted computation pipeline with default svelte-preprocess & tailwind postcss config:

1. svelte-preprocess launches postcss with its default config on any style tag, which in this case makes tailwind AST for @apply and friends, which are not going to be used in every component < FIX: it makes it only with <style lang="postcss"> and with svelte-preprocess postcss: true option if tailwind is present in postcss.config.js
2. resulting css goes to the svelte compiler
3. svelte-loader or rollup-plugin-svelte stores all component styles from the compiler in memory cache
4. every compiled svelte component loads this style from cache through import statements
5. for webpack, due to how copypasted webpack-virtual-modules work, svelte-loader with emitCss: true reloads that virtual css file for every component on any change applying postcss transformations from default postcss config for example, making tailwind AST for the second time < FIX: that is only the case if you have a rule for .css that launches postcss with its config

So, make separate tailwind config for postcss working only for lang="tailwind" explicitly, that way you will be only making tailwind's AST where it's needed.

If you are using same global postcss config with tailwind and autoprefixer for svelte-preprocess and *.css files, then you are making tailwind's AST twice, one for svelte-preprocess, and second is for loading compiled css from compiled svelte component making it slow as hell.

So I would advise you to make separate configs for tailwind and other postcss stuff like autoprefixer for svelte components and external files (something like *.tcss).

I believe the smoothest DX with hmr (and this is important for style tags) can be achieved with webpack 5 for now. So...

Tired of slow tailwind?

Get this template: non25/svelte-tailwind-template

This issue can be closed, because it belongs in corresponding rollup-plugin-svelte and svelte-loader repos.