Build time too high when using Tailwind CSS with a Svelte app

user_14946790 0
Viewed 493

EDIT - By using SvelteKit starter app from here and applying tailwindcss as a adder by following steps through this repo I was able to compile the svelte-app with tailwindcss utilities in real-time.

But would still like to know about the issue I mentioned below and a fix for it.

Trying to create a Svelte app and add Tailwind CSS Framework to it.

So as of now: I have Installed the svelte app and added the Tailwind CSS and the other requirements based on this website and I am able to use Tailwind classes and utilities in my app.

Now the problem is even for such simple project the build time for the app is too high (~19s) which is not ideal to work with.

All other file configs and properties are default other than the changes mentioned in the link above to add tailwind to a svelte project.

<!--------- App.svelte --------->
...

<main>
    <h1 class="text-purple-400">Hello World!</h1>
</main>


<style global lang="postcss">
  @tailwind base;
  @tailwind components;
  @tailwind utilities;

  ...
</style>

############################ Terminal output ############################

bundles src/main.ts → public\build\bundle.js...
created public\build\bundle.js in 18.7s

[2021-11-25 20:10:38] waiting for changes...
  [20:10:38] 200 ─ 0.87ms ─ /
  [20:10:38] 200 ─ 1.29ms ─ /global.css
  [20:10:38] 200 ─ 1.68ms ─ /build/bundle.js
  [20:10:38] 200 ─ 2.82ms ─ /build/bundle.css
  [20:10:38] 200 ─ 0.73ms ─ /favicon.png

So till now what I've tried and understood in that process:

  1. This excessive build time is caused due to the fact that the Tailwind utilities.css file is rebuilt after every change made in <style> of the app. (And also since this is the biggest file in comparison with base.css components.css and hence takes more time)
  2. One way to fix this issue is to separately import of these Tailwind files which would avoid the rebuilding of utilities.css whenever a style change is made in the app. (I am not clear how this would solve the problem)

I read through many GitHub discussions related to this but I still was not able to fix my issue or wrap my mind around that how importing the files separately is making a difference?

So my final question is:

What is the way to fix this problem (reduce the build-time when using Tailwind) and how is that fix solving the problem?

Thank you in advance :).

P.S. - This is my first question here so sorry for any mistakes.

postcss tailwind-css svelte
1 Answers

I'm also facing the same issue. For me https://github.com/svelte-add/svelte-add worked fine. You can add tailwind and postcss using the below commands

npx svelte-add postcss
npx svelte-add tailwindcss

**Edit 1 :- ** You can also set the purge option in tailwind.config.js option to one of the below values and it will also speed up your build time.

purge:{
   enabled: true
}

or

const production = !process.env.ROLLUP_WATCH;
purge:{
  enabled: production
}
user_88799730
Related