How to Use Tailwind's Just-in-Time Mode in Angular

Since v11.2, the Angular CLI natively supports Tailwind CSS. This means that, although we don't have access to the underlying PostCSS pipeline, we can use Tailwind CSS without many hassles. If you have Tailwind installed and a tailwind.config.js file, the Angular CLI will automatically add Tailwind to the list of PostCSS plugins it uses when building or serving your application.

I've already written a guide on how to add Tailwind CSS to your Angular application. In this article, I would like to go a step further and talk about how we can use Tailwind's just-in-time (JIT) compiler with Angular.

What is Tailwind's JIT compiler?

First of all, I want to point out that the JIT compiler is currently in preview. But I have been using it for quite some time in my projects and it works like a charm.

The default Tailwind compiler is an ahead-of-time (AOT) compiler that is designed to generate thousands of utility classes that we may or may not need. This results in a huge bundle size by default. But when building for production, Tailwind's built-in PurgeCSS tool will analyze our code and remove from that huge bundle all the CSS that we're not actually using in our application.

But, in development we still had to deal with that huge bundle which impacted browser performance but also resulted in slower startup time of our development server (ng serve). With the new JIT mode, the process is now reversed. The utility classes are generated on demand when we actually use them in our code.

The main benefits of the JIT mode are faster build times and better performance in development, but they're not limited to these. The JIT mode has opened the door to great new features like the ability to generate custom utilities by using a syntax like bg-[#fefefe] which will generate the following CSS:

 .bg-\\[\\#fefefe\\] {
	--tw-bg-opacity: 1;
	background-color: rgba(254, 254, 254, var(--tw-bg-opacity));
}

If you want to learn more about all the benefits of the new JIT mode, check out Tailwind Labs' great video on the topic.

Enabling the just-in-time mode in Angular

To enable the just-in-time mode, there are two things we need to do:

• Set the mode option to jit in our tailwind.config.js file.
• Set the TAILWIND_MODE environment variable to build or watch.

But we also need to take into account our code editors because we still want to have intellisense when authoring our code. I use WebStorm which doesn't support the new JIT mode yet. So I need a setup that uses the new JIT mode when I use the Angular CLI and Tailwind's AOT mode for the IDE. Here's the config that works for me:

const mode = process.env.TAILWIND_MODE ? 'jit' : 'aot';

module.exports = {
  mode: mode,
  purge: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Let me break it down for you.

The TAILWIND_MODE environment variable

The TAILWIND_MODE environment variable is automatically set to build or watch by the Angular CLI. ng serve sets its value to watch and ng build sets it to build. Great!

If you manually set the TAILWIND_MODE environment variable—in your npm scripts for instance—your value will take precedence as the Angular CLI will not override it.

Setting the mode to 'jit' or 'aot'

We use the value of the TAILWIND_MODE environment variable to determine if we want to use the Tailwind's JIT or AOT compiler.

const mode = process.env.TAILWIND_MODE ? 'jit' : 'aot';

If the TAILWIND_MODE environment variable is set, we use the JIT mode. Otherwise we use AOT mode. With this, when we run ng serve or ng build, the JIT mode will be enabled. And IDEs like WebStorm will still use the AOT mode and provide code completion for all the Tailwind utility classes.

Summary

In this article, we learned about the Tailwind just-in-time compiler and the great benefits it provides. We also saw how to integrate it with Angular in a way that doesn't hinder our ability to use our IDEs' autocompletion features for Tailwind utility classes.

If you enjoyed this article, follow @ahasall on Twitter for more content like this.