Compile CSS takes over 5 seconds using TailwindCSS + Sass

[maxigimenez]

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.

[Timer]

It looks like you might be running the CSS purge in development, can you try disabling that?

[maxigimenez]

@Timer not sure how I can do that, I don't have any specific for it. This is my postcss.config.js https://github.com/maxigimenez/personal/blob/master/postcss.config.js

[maxigimenez]

Ah got it, is the purge option here https://github.com/maxigimenez/personal/blob/master/tailwind.config.js, I will try without it.

[maxigimenez]

Setting purge: [] is still the same result, 5 seconds to compile.

[vvo]

I am having the same issue, not even using Sass but the standard Tailwind CSS setup with Next.js. Not sure where to start to debug this though. I tried disabling purge (though it's only active in NODE_ENV production): still super slow.

[benbender]

I've had the same issue and investigated a little. In a minimal reproduction env with only nextjs, tailwind + postcss-env and postcss-cli, it took around 3 seconds for me to build tailwind in dev with disabled purge on cli. So there doesn't seem to be much what can be done on the nextjs-side of things.

BUT: if you run nextjs in dev and separate tailwinds css-imports and your custom app-css in two css-files it's quite fast, because nextjs doesn't rebuild tailwind's million css-classes every time you do a hot-rebuild.

[pavan-sagar]

Hi Everyone,

I seem to have a related issue so thought to share here.

I am learning Nextjs and trying to use tailwind css with it for the first time. I notice that every change I make to the index.css file on the class selector with @apply directive of tailwind is taking 8-10s to compile and show on the browser.

Steps to reproduce :

Run the command
npx create-next-app --example with-tailwind-css test-app

Create a button in pages/index.js and give it the classname btn-blue.

Run the server using below command

npm run dev

Change any property inside styles/index.css file for the btn-blue selector (Ex: change bg-blue-400 to bg-red-400 or so, anything to trigger a re-compile). And observe the time it takes to reflect the changes on the localhost at browser.
Some of my observation after experimenting :

This slowness is only when making changes into the @apply style. If I comment all the tailwind code in the index.css and write my own pure css style and change it, the hot reload is instantaneous

The hot reload is instant even when changing/adding any tailwind class to the classname of the element in index.js file (Inline styling).

So the issue seems to be only when using tailwind css from an external css file.

I hope you can check and help me on this. Thanks

[pavan-sagar]

I've had the same issue and investigated a little. In a minimal reproduction env with only nextjs, tailwind + postcss-env and postcss-cli, it took around 3 seconds for me to build tailwind in dev with disabled purge on cli. So there doesn't seem to be much what can be done on the nextjs-side of things.

BUT: if you run nextjs in dev and separate tailwinds css-imports and your custom app-css in two css-files it's quite fast, because nextjs doesn't rebuild tailwind's million css-classes every time you do a hot-rebuild.

Hi @benbender Can you please explain how to split this in 2 different files ? I am new to web development. I basically want to use the @apply directives in a css file and want to import it into the component js file for styling.

[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.

[pavan-sagar]

@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.

Sharing the feedback for others who are facing this issue. The workaround by @benbender is working like a charm. I can see the changes reflect in less than a second now. Thanks a lot Ben :)

[benbender]

@Timer From my understanding, there is nothing that can be done on the nextjs-side of things. If the complete tailwind-postcss-stuff runs on every hot-reload, it is slow. End of story... So I think that issue could be closed.

In the end it's more like a doc-issue if you want to see it that way.

[nfantone]

Unfortunately, the proposed solution, while it does work, brings along other non trivial issues like changes in CSS declaration order.

You'd typically define, say, your custom component's css after tailwind's but before utilities - like so:

@import 'tailwindcss/components';
@import './my-components.css';

@import 'tailwindcss/utilities';
@import './my-utilities.css';

Moving all your tailwindcss/* imports to a different file means that this no longer straightforward.

What I ended up doing is creating three main .css files:

• core.css: imports all "global" stuff and all tailwindcss/* styles minus tailwindcss/utilities.
• components.css: imports all my custom component's styles.
• utilities.css: imports tailwindcss/utilities + custom utilities.

And then, on _app.js:

// _app.js
import '../styles/core.css';
import '../styles/components.css';
import '../styles/utilities.css';

[benbender]

@nfantone Yes, that's the more elaborate solution to the problem. I'd never had any problems with mine, so it was kind of "works for me". Btw, this setup may change or fail in the near future due to changes in tailwind: tailwindlabs/tailwindcss#2288

[nfantone]

Interesting. Thanks for sharing that @benbender. We'll see how it unfolds, then. In the meantime, the workaround does the trick for me, as well.

Would be nice to have something more of a "first-class" approach to the problem, though.

[benbender]

To me it's not a bug in Nextjs but more like a documentation issue. And maybe more on the example-side of tailwind. So I created a pull-request with all the findings from this thread: tailwindlabs/tailwindcss-setup-examples#90

[leerob]

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

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

[sahilshahane]

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

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

my god, brother thank you so much!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.