.png)
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
- adamwathan/tailwind-jit-vite-example
- How to use Tailwind's JIT compiler with Laravel Mix
- Tailwind's JIT Compiler Makes Tailwind + Webpack Faster in Development
- Tailwind JIT starter guide for accessibility
- Add Tailwind CSS to Angular
- Windi CSS and Tailwind 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
- GitHub - tailwindlabs/tailwindcss-jit
https://github.com/tailwindlabs/tailwindcss-jit - https://github.com/apvarun/demo-ng-tailwindcss-jit
- @tailwindcss/jit not working when configured in postcss.config.js · Issue #37...
https://github.com/tailwindlabs/tailwindcss/issues/3791
tailwindcss.com
- Optimizing for Production - Tailwind CSS
https://tailwindcss.com/docs/optimizing-for-production - Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
https://tailwindcss.com/ - Functions & Directives - Tailwind CSS
https://tailwindcss.com/docs/functions-and-directives
