Using CSS frameworks like Bootstrap, Materialize CSS has become a common practice among frontend developers.

But have you ever thought of the impact these frameworks make on your application’s performance?

In most situations, all you need is a button or a responsive grid. But you have to generate a complete style sheet at the initial build time with a size of around 300KB.

This article will show you how to reduce its size by using the Tailwind CSS compiler.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework stuffed with classes like flex, pt-4, text-center, and rotate-90. It can be composed to create any design directly in your markup.

The beauty of Tailwind CSS is that it doesn’t impose design specifications or how your site should look like. You can simply bring tiny components together to build a unique user interface. Isn’t it amazing? ?

With the development of Tailwind CSS over the years, one of the heftiest constraints to deal with is the generated file size in development.

Since now you know what Tailwind is, without further ado, let’s take a look at the features of the new Tailwind compiler and how it addresses these issues.

Features of Tailwind CSS Just-In-Time Compiler

@tailwindcss/jit, the just-in-time compiler for Tailwind CSS, is a new experimental library that compiles all of your CSS on-demand.

It compiles only the CSS you’re using as you need it and this comes in handy in many ways.

Lightning-fast build times

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.

However, with JIT, even the massive projects can be compiled within 800 ms, irrespective of the build tool you’re using.

Better browser performance in development

As we all know development builds are much larger in size than production builds. But with the Tailwind JIT compiler, the development builds are also small as the production builds.

Therefore, the parsing and the management of sizeable pre-generated CSS file by the browser is not required. For projects where there are heavily extended configurations, the JIT engine helps to make dev tools a lot more responsive.

CSS in both the development and production is identical

Have you ever worried about accidentally purging an essential style in production? From now onwards you don’t have to worry about it anymore ?. With JIT, the styles are generated only when you need them. You don’t need to purge any unused styles in production.

“You can see exactly the same CSS in all environments.”

Generate arbitrary styles without writing custom CSS

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 @tailwindcss/jit.

Since styles are generated on-demand, you can generate utility for this as needed using square bracket notation like a top[-113px]. This is very convenient when developing pixel-perfect designs where only a few elements need very highly specific styles.

Every variant is enabled out of the box

Due to file size considerations, some variants like active, disabled, and focus-variable are not usually enabled by default. You can even stack all the variants together to easily target a specific situation without writing custom CSS (sm:hover:active:disabled:bg-gray-400 ).

Besides, there’s no requirement to configure which variants are accessible for each core plugin. You can use any variant you need and more in blending with any utility without doing modifications to your tailwind.config.js file.

New custom classes are easily composed out of Tailwind

Using the @apply directive new classes can be easily composed out of Tailwind classes.

for example:

/* Input */
.btn {
  @apply py-2;
  @apply p-4;
}

/* Output */
.btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding: 1rem;
}

That allows you to essentially extend and customize Tailwind to your own needs. Custom CSS classes can be shared, reused, and collaborated as independent components, using Bit, making them available for reuse across web projects. They can even serve as the building block of your own design system.

Built-in important modifier

You can make any property necessary by just assigning a ‘!’ character to the beginning. The ‘!’ always goes at the beginning of the property name, after any variant but before any prefix.

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>

This comes in useful when you need to increase specificity, but it’s difficult as there are some styles you don’t control.

Initially, @tailwindcss/jit was a separate library, and the target was to roll it right back into Tailwind CSS, configuration option. And the good news is, in Tailwind CSS v2.1, the @tailwindcss/jit has merged with the core Tailwind CSS repository.

Note: If you’re currently using @tailwindcss/jit, make sure you migrate into Tailwind CSS v2.1, as that’s where all the future development of the engine will happen.

Enabling JIT mode

Enabling just-in-time mode is really simple. You just need to add jitas the modein your tailwind.config.js file.

// tailwind.config.js  module.exports = {
mode: 'jit',
    purge: [
      // ...
    ],
    theme: {
      // ...
    }
    // ...
  }

In JIT mode all your CSS is generated on demand by scanning the template files. So, make sure you configure the purge option in your tailwind.config.js file with all of your template paths.

// tailwind.config.js  module.exports = {
    mode: 'jit',
    // These paths are just examples, customize them to match your project structure
    purge: [
      './public/**/*.html',
      './src/**/*.{js,jsx,ts,tsx,vue}',
   ],
    theme: {
      // ...
    }
    // ...
  }

Now, when you start your development server or the build runner, your CSS will be generated on demand without generating everything in advance.

Conclusion

Utility-first CSS frameworks like Tailwind help you to reduce style-related headaches in the development process.

In this article, I’ve discussed the most popular utility-first CSS library right now, Tailwind CSS. One of the significant constraints it had over the years was its generated file size in development. However, with the introduction of the JIT engine, you don’t need to worry about the development builds anymore!

See you again in another exciting article. Until then, happy coding! ?