Configure And Use TailwindCSS JIT Mode With Nx
While still an experimental feature in Tailwind v2, JIT compilation mode will be the default in v3. JIT mode not only gives faster rebuild times and allows to generate arbitrary styles, but mainly gives browser tools some relief by only shipping what is needed. Tailwind purging only happens when you create a production build, which means your browser dev tools have to process the possibly megabytes large Tailwind CSS, which might result in a noticeable slowdown. In this lesson we're configuring JIT mode for our setup and we'll learn how we can leverage it with Nx.
Prefer to read along as well? Here's the accompanying article.
Instructor: [0:00] In our Nx workspace, we have Tailwind configured properly. We even configured the purging here, which makes sure that our CSS is as small as possible.
[0:08] One thing to notice here is that the purge mode only works in your final production build. Whenever you execute actual build and you run in the production mode, meaning the mode and variable should be set to production, Tailwind will use this information here to purge our CSS.
[0:25] During development, however, the browser gets the maximum build of Tailwind, whatever you have included in your CSS at the moment you launch the browser.
[0:34] The Tailwind folks have introduced the so-called just-in-time mode. If you scroll a bit down in their docs, there are a set of advantages listed, which are pretty obvious at this point. First of all, you get lightning-fast build times, because Tailwind can incrementally adapt as you change the CSS, and therefore, can be much faster.
[0:51] Another advantage which I see, especially, is that the browser performance will be much better, in the sense that, during development, you might ship lots of megabytes of Tailwind CSS to the browser tools. If you start inspecting the CSS on the document, it might take a bit, because the browser development tools have to process all those megabytes of Tailwind CSS.
[1:13] Obviously, with the just-in-time mode, only what you need right now would be shipped to the browser development tools, and therefore, it would be much more performant. Let's see how we can enable this in our Nx workspace. First of all, what we need to do is enable JIT mode in our Tailwind configuration. We can say mode: 'jit'. With that, we have enabled it.
[1:37] One thing we need to make sure we do, is when we run our process, we don't just serve the application, which is Site in this case, but we also pass an environment variable to it. We want to add here, TAILWIND_MODE=watch, and pass that to our command here, because that will instruct Tailwind to continuously watch as we change the files and rebuild behind the scenes.
[2:01] As you can see in the log, you see that Tailwind CSS is watching for changes, and that you're using the JIT mode. Apart from that, it still works as we expect. If we open up our browser, we can still see all the Tailwind CSS being applied correctly.