close icon
daily.dev platform

Discover more from daily.dev

Personalized news feed, dev communities and search, much better than whatโ€™s out there. Maybe ;)

Start reading - Free forever
Start reading - Free forever
Continue reading >

Everything you need to know about Tailwind CSS JIT Compiler

Everything you need to know about Tailwind CSS JIT Compiler
Author
Nimrod Kramer
Related tags on daily.dev
toc
Table of contents
arrow-down

๐ŸŽฏ

For anyone who is into web development, Tailwind CSS has been a major topic of interest. The core advantage of Tailwind CSS, especially in its latest version, is that it allows you to stop writing tons of CSS like you're probably used to do. Instead, Tailwind CSS allows you to use it directly in your HTML. That way you can simply focus on writing HTML.

Late into Halloween night in 2017, Adam Wathan and his team released the very first version of Tailwind CSS โ€” a utility-first open-source CSS framework for rapidly developing custom user interfaces. Following the initial launch of Tailwind CSS, it started gaining more and more interest from the web dev community. Rightfully or not, I leave it for you to decide.

What does the Tailwind JIT compiler do?

According to the official docs, it's an experimental just-in-time compiler for Tailwind CSS that generates your styles on-demand as you author your templates instead of generating everything in advance at initial build time.

The official announcement of Just-In-Time: The Next Generation of Tailwind CSS was made on March 15, 2021. In a crisp 13 mins video, Wathan covers all the major updates, so at this point, I recommend opening it in a new tab and watch the original announcement on YouTube after reading this post.

The main features of the new JIT compiler

๐Ÿš€ Smoother browser performance

This point is going to have great importance with the upcoming release of Google's Core Web Vitals. In this next-gen version of Tailwind, the browser doesn't have to parse and manage multiple megabytes of pre-generated CSS. In projects with heavily extended configurations, this makes dev tools a lot more responsive.

๐Ÿ“ฆ Out-of-the-box variants

Variants like focus-visible, active, disabled, and others are not normally enabled by default due to file-size considerations. JIT generates styles on demand, you can use any variant you want, whenever you want.

๐ŸŒˆ No need for custom CSS

Styles are generated on-demand, you can just generate a utility for any specific value that wasn't part of your design system. Check out more examples below.

๐Ÿ‘€ CSS in Staging = CSS in Production

Since styles are generated as they are needed, you don't need to purge unused styles for production, which means you see the exact same CSS in all environments. That's important to many developers as you can stop worrying about accidentally purging an important style in production.

๐Ÿฅท Fast build times

Tailwind can take 3โ€“8s to initially compile using its CLI, and upwards of 30โ€“45s in webpack projects because webpack struggles with large CSS files. Tailwind JIT library can compile even the biggest projects in about 800ms (with incremental rebuilds as fast as 3ms), no matter what build tool you're using.

Useful examples of using Tailwind CSS JIT

Another important resource you may want to check is the thread on Reddit about the announcement.

Why is the JIT compiler so much faster?

Ido Shamun has covered this topic in a short tutorial and first impressions of using Tailwind JIT in a previous post:

Tailwind CSS JIT Compiler is a game-changer when it comes to development experience. It changes generates smaller CSS files in development and reduces build times significantly. It also bundled with some new features that I haven't tried out yet. Remember that the compiler is still experimental before you use it. Enjoy coding!

What are the limitations of the Tailwind CSS JIT Compiler?

There is an updating list on the Tailwind GitHub page of the current known limitations:

  • Advanced PurgeCSS options like safelist aren't supported yet since we aren't actually using PurgeCSS.
  • You can only @apply classes that are part of core, generated by plugins, or defined within a @layer rule. You can't @apply arbitrary CSS classes that aren't defined within a @layer rule.
  • The JIT project only supports PostCSS 8. It's expected to change soon.

If you're that kind of developer who likes to read what the haters have to say rest assured, if got you covered:

What is the difference between JIT and AOT?

The main differences between JIT and AOT in Angular are: Just-in-Time (JIT), compiles your app in the browser at runtime. Ahead-of-Time (AOT), compiles your app at build time on the server. JIT compilation is the default when you run the ng build (build only) or ng serve (build and serve locally) CLI commands.

Typically JIT is used in development while AOT is for production. However, The big benefit when using AOT for production is reducing bundle size for faster rendering. In JIT this point gets a solution.

Conclusion

From reading so many reviews of Tailwind CSS JIT Compiler seems like the reactions from the developers' community are overall very positive. This applies especially to indie projects and not yet being fully adopted for enterprise applications. Change takes time and it's evident that the Tailwind CSS team is heading in the right direction.

More references

github.com

tailwindcss.com

Why not level up your reading with

Stay up-to-date with the latest developer news every time you open a new tab.

Read more