If you’ve ever needed to add some extra specific styles, like top: -113px for an atypical background image that wasn’t a part of your design system, it is now possible with the styles are generated on-demand, you can generate utility for this as needed using square bracket notation like a top. “You can see exactly the same CSS in all environments.” Generate arbitrary styles without writing custom CSS You don’t need to purge any unused styles in production.

With JIT, the styles are generated only when you need them. Have you ever worried about accidentally purging an essential style in production? From now onwards you don’t have to worry about it anymore 😋. CSS in both the development and production is identical For projects where there are heavily extended configurations, the JIT engine helps to make dev tools a lot more responsive. Therefore, the parsing and the management of sizeable pre-generated CSS file by the browser is not required. But with the Tailwind JIT compiler, the development builds are also small as the production builds.

Better browser performance in developmentĪs we all know development builds are much larger in size than production builds. However, with JIT, even the massive projects can be compiled within 800 ms, irrespective of the build tool you’re using.

Tailwind typically takes 3 to 8 seconds to initially compile a project using the CLI and more than 30 to 40 seconds in a webpack project because webpack struggles with large CSS files. It compiles only the CSS you’re using as you need it and this comes in handy in many ways. Features of Tailwind CSS Just-In-Time the just-in-time compiler for Tailwind CSS, is a new experimental library that compiles all of your CSS on-demand.

Css html compiler