Compile CSS takes over 5 seconds using TailwindCSS + Sass

Bug report

Describe the bug

I’m using TailwindCSS + Sass for my personal site and I noticed a slowness to compile when I do any change on the sass file.

So I added a Date.now() logs on the compiler and I got that on average it takes 5 seconds to compile. Worth to mention that my sass file is fairly small, the major part is to import tailwind.

Here’s the file https://github.com/maxigimenez/personal/blob/master/styles/index.scss

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone https://github.com/maxigimenez/personal
2. Run the project locally
3. Do any change on the styles.index.scss
4. See error

Expected behavior

It should be faster IMO, mostly because this sass file could grow a lot for a larger project.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: macOS
• Browser (if applies) -
• Version of Next.js: 9.4.4 (and also try it on canary)
• Version of Node.js: 10.16.3

Additional context

These are the changes that I did to get the timing:

Also, I’m more than open to investigate if you guys consider that this needs to be improved.

[benbender]

@pavan-sagar Simply create two css files. First one has the global stuff (in my case font-imports, @tailwind base, etc) and the second one your app-specific css-stuff incl. @apply-rules.

Import both files in your _app.[j|t]sx. This way postcss will only rebuild the second file on changes and the rebuild is nearly instant, because it doesn’t need to reprocess all the tailwind-stuff.

[leerob]

I would highly recommend checking out Tailwind JIT, which solves this problem 😄

https://github.com/tailwindlabs/tailwindcss-jit