Reducing TailwindCSS's dev environment file size

Earlier today, Adam Wathan tweeted about the new changes coming up for TailwindCSS. In short, he announces among several things - a brand new plugin named JIT (Just In Time) for Tailwind.

The video has a neat demo where the file size in dev is brought down from a large size of 12 MB to less than 10 KB - which lines up with what I've seen on the production builds of Tailwind that I have deployed. This has been a major problem when I build Arbeitnow where Google Chrome's dev tools struggles to function normally with a file of 4 MB.

Promises are great, but does it hold up? I put it to test on my local system that I have with me - a 2012 MacBook Pro (nowhere close to the fancy M1 machines!). I pulled down the library and installed it using:

npm install -D @tailwindcss/jit tailwindcss postcss

Then instead of the default tailwindcss plugin on postcss.config.js, I replaced it with @tailwindcss/jit

module.exports = {
    plugins: {
      '@tailwindcss/jit': {},
      autoprefixer: {},
    }
  }

Then I ran my local watch server using

npm run watch

Voila! The file size is now similar to what production builds are. I'll keep an eye out for other changes or issues that popup - considering that this is a preview/beta of sorts, but I'll go to bed tonight as a happy person!