Get blazing-fast HMR with Webpack and Tailwind

TailwindCSS is one of the trendiest things on the front end right now. It’s a utility-first CSS framework that allows you to write CSS inside your markup. While it’s great to use, it’s been known to be very slow when trying to incorporate it with your own CSS styling. Because when you add some new styles to your CSS file, webpack starts recompiling all the tailwind imports, which is no less than a couple megabytes in size, and the next thing you know, you’re waiting for multiple seconds just for your bundler to finish recompiling every time you edit something in your CSS file.

Fortunately, there’s a simple workaround for that. You can simple tell webpack, “hey, compile everything the first time I start the server, but after that, when I edit any of my source code, exclude the tailwind.css file from the compilation process”. I’ve explained exactly how you achieve this below.

First things first, we have to split our styling into (at least) two files. One should have the name of tailwind.css which should import all the factory tailwind code, that part is (almost) mandatory to get started with tailwind. For the other one, you can call it whatever you want, I’m using index.css. It should contain all of your styling, including any customizations of tailwind that fit your needs. In our App.js file, we’ll be importing both of these files. Lastly, we’ll be updating our webpack config file to ignore the tailwind.css file from recompiling once the server is up and running.

Note: DO NOT put anything except the imported factory tailwind code inside your tailwind.css file. Otherwise styling changes may not appear before a server restart.

If you did everything properly, your dev server should now be blazing fast with (almost) zero-delay HMR.