svelte-preprocess: CSS Tailwind slow build time even with different files...

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.

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

@frederikhors Here is a simple example. It’s not really the way you should organise the css files when working with Tailwind, but it outlines my point. You should get expected “fast” build times and you should also be able to use all the Tailwind features as expected.

Here are the changes applied to the current svelte-template: https://github.com/dionysiusmarquis/svelte-tailwind-template/commit/0a0c828fd02980b239ce14ad3a9df65624683d3f

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: https://github.com/sveltejs/svelte/issues/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'
…