Poor performance as part of a webpack PostCSS build system
Problem
Using the latest Tailwind CSS (1.8.13 as of this writing), I'm seeing slowness very similar to https://github.com/tailwindlabs/tailwindcss/issues/1620 & also https://github.com/tailwindlabs/tailwindcss/issues/443, the performance of using HMR with `webpack-dev-server` and webpack 4 or 5 is quite slow. It takes about 10 seconds on my MacBook Pro 2019 just changing a single color in a `.pcss` file, and it appears externally that it's rebuilding everything each time. The building of Tailwind CSS seems to have gotten slower and slower as the amount of utilities it includes have gone up. I'm not sure what the caching implemented in 1.7.2 does, but in a long running process (and maybe it's already doing this but) what if all of the Tailwind-specific imports like: [code block] ...were cached in a long running process, so it just returns the pre-generated blob? I'd imagine you're probably already doing this, but have any instrumentation or profiling been hooked up to the build to determine where the bottlenecks are? My postcss.config.js looks like this: [code block] ...and the whole setup is essentially what's here: https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development#tailwind-css-post-css-config It's not doing anything fancy re: the PostCSS part of the build, but its extremely slow compared to the HRM of JavaScript modules, etc. I tried removing `postcss-preset-env` to see if it made a difference, but it doesn't seem to. Related: https://
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Solution: Poor performance as part of a webpack PostCSS build system
I did a little more research on this tonight, and removing Tailwind CSS entirely from the project resulted in instantaneous HMR'd CSS. Narrowing it down further, my `.pcss` has the following lines: [code block] Removing `@import 'tailwindcss/utilities';` results in the compilation being extremely fast; which I suppose makes sense, because it is generating the most CSS. If we're just doing a ra
Trust Score
6 verifications
- 1
I did a little more research on this tonight, and removing Tailwind CSS entirely
I did a little more research on this tonight, and removing Tailwind CSS entirely from the project resulted in instantaneous HMR'd CSS.
- 2
Narrowing it down further, my `.pcss` has the following lines:
Narrowing it down further, my `.pcss` has the following lines:
- 3
Removing `@import 'tailwindcss/utilities';` results in the compilation being ext
Removing `@import 'tailwindcss/utilities';` results in the compilation being extremely fast; which I suppose makes sense, because it is generating the most CSS.
- 4
If we're just doing a raw import of a pre-generated file here, I'm guessing that
If we're just doing a raw import of a pre-generated file here, I'm guessing that it's just due to the massive side of the CSS file, and there may not be room for optimizations here.
Validation
Resolved in tailwindlabs/tailwindcss GitHub issue #2544. Community reactions: 14 upvotes.
Verification Summary
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep