Improve TailwindCSS 2.0 / Webpack Startup and Reload Times in Dev
Go from 5+ second startup and 3+ second CSS reload times to 300ms and 150ms with a few config changes.
Quick Jump:
Out of the box I found TailwindCSS 2 and Webpack 5 to be pretty slow in development, even with an SSD and a quad core CPU.
After a bit of research and tinkering I found a solution to make Tailwind and Webpack faster and here we are. It comes down to enabling filesystem caching with Webpack and importing TailwindCSS a bit differently than what the docs mention.
# Demo Video
Timestamps
- 0:08 – Tailwind 2.0 and Webpack can be kind of slow in development
- 0:45 – Demonstrating the slow start up time for Webpack’s watcher with Tailwind
- 1:57 – It takes a while because Tailwind is generating 3.5mb+ of CSS
- 2:46 – Enabling filesystem caching with Webpack to improve startup times
- 4:57 – From 5.5 seconds down to 350ms for Webpack startup times
- 5:59 – Demonstrating how slow it is to make CSS changes by default
- 7:48 – Making CSS updates faster by importing Tailwind a bit differently
- 9:33 – From 2.5 seconds down to 150ms for making CSS updates
- 10:00 – We can still use Tailwind’s @layer directive to customize Tailwind
- 12:57 – If you have any questions let me know
Reference Links
- https://github.com/nickjj/docker-flask-example
- https://tailwindcss.com/docs/installation
- https://github.com/tailwindlabs/tailwindcss/issues/443
Have you found a different way to get these speed boosts? Let me know below.