Tailwind CSS now with a Just In Time Compiler

Tailwind CSS announced a brand new just-in-time compiler that is a new experimental library that compiles all of your CSS on-demand as you author your template files, instead of generating your entire stylesheet up front. Here is a video showcasing the new feature:

From the release announcement

One of the hardest constraints we've had to deal with as we've improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there's only so much CSS that build tools and even the browser itself will comfortably tolerate.

For that reason, you've always had to be careful about expensive changes to your config file like adding too many extra breakpoints or enabling extra variants like disabled or focus-visible.

Today I'm super excited to share a new project we've been working on that makes these considerations a thing of the past: a just-in-time compiler for Tailwind CSS.

You can try this out today by installing it:

npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer

Then, putting it into your PostCSS configuration:

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