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 or MODLR 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

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!

--

--

Backend developer from Berlin, building https://arbeitnow.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store