Updated on April 30, 2021 in #javascript

Tailwind's JIT Compiler Makes Tailwind + Webpack Faster in Development

In this video we'll use Tailwind's JIT compiler to go from 3-6 second Webpack update times to 100-200ms without Webpack caching.

I was pleasantly surprised at how much faster things were in development after enabling it.

On my dev box I went from 6 second Webpack load times and 3.75mb of CSS (183k lines) to 1.25 second load times and 14kb of CSS (790 lines). CSS updates are also happening in about 150ms now.

The best part about this is it doesn’t depend on using any special cache settings from Webpack like the Webpack file system cache, or having to import your Tailwind CSS in a non-standard way to workaround slow updates when changing your CSS.

You just add the JIT package to your project, reference it and you’re good to go.

# Demo Video

Updates Since I Recorded This Video

A few minor things have changed since I recorded this video. Now it’s even easier to use the JIT compiler. You can still follow the video but make these 3 changes when they come up:

1. If you’re using Tailwind 2.1.0+ you no longer need to install the extra @tailwindcss/jit package since the JIT compiler is included in the main TailwindCSS package.

2. In your postcss.config.js file you can reference the regular tailwindcss package.

3. To enable the JIT compiler in your tailwind.config.js add mode: 'jit'.

That’s it! Everything else will work the same as it did in the video.

Timestamps

• 0:32 – Implementing the JIT compiler in an existing Tailwind + Webpack project
• 0:45 – Why is the JIT compiler so much faster?
• 1:16 – Replacing what was done to speed up Tailwind + Webpacker in an older video
• 2:02 – The JIT compiler speeds up one thing that the previous strategy did not
• 3:09 – Before the JIT compiler? 6.5 seconds to load Webpack without caching
• 3:38 – Recapping what changed at the Webpack + Tailwind level for the old strategy
• 3:54 – Installing the Tailwind JIT compiler in your package.json file
• 4:44 – Updating your PostCSS config to use the new JIT compiler
• 5:18 – After the JIT compiler? 2 seconds to load everything with no file system cache
• 5:42 – From 3.75mb and 183k lines of CSS to 14kb and 790 lines for the CSS file
• 6:16 – Updating the old Tailwind import style to doing it straight from the docs
• 7:29 – Updating the CSS file and it only took 170ms for Webpack to reload it
• 8:07 – It’ll be in all of my open source example apps when it stabilizes a bit
• 9:19 – I’m excited about this new JIT compiler

Reference Links

• https://blog.tailwindcss.com/just-in-time-the-next-generation-of-tailwind-css
• https://github.com/nickjj/docker-flask-example
• https://www.npmjs.com/package/@tailwindcss/jit
• https://tailwindcss.com/docs/installation

Is the new JIT compiler working well for you? Let me know below.