Learn Docker With My Newest Course

Dive into Docker takes you from "What is Docker?" to confidently applying Docker to your own projects. It's packed with best practices and examples. Start Learning Docker →

Improve TailwindCSS 2.0 / Webpack Startup and Reload Times in Dev

blog/cards/improve-tailwindcss-2-and-webpack-startup-and-reload-times-in-dev.jpg

Go from 5+ second startup and 3+ second CSS reload times to 300ms and 150ms with a few config changes.

Quick Jump: Demo Video

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

Have you found a different way to get these speed boosts? Let me know below.

Never Miss a Tip, Trick or Tutorial

Like you, I'm super protective of my inbox, so don't worry about getting spammed. You can expect a few emails per month (at most), and you can 1-click unsubscribe at any time. See what else you'll get too.



Comments