Exploring the Advantages of Tailwind CSS 3.0 with JIT Mode

In my journey through web development, I’ve often expressed a cautious stance towards bulky CSS frameworks like Bootstrap, primarily due to their extensive predefined styles. My quest for a streamlined CSS toolkit led me to Tailwind CSS, a revelation for crafting faster, more efficient demos. The release of Tailwind CSS 3.0, enhanced with Just-In-Time (JIT) compilation, has solidified its place in my toolkit. Delving into “Tailwind CSS Essential Training” by Ray Villarobos on LinkedIn Learning has only deepened my understanding and appreciation. Let’s delve into how this combination is revolutionizing web development for enthusiasts everywhere.

BEM + TW Utility Classes: A Perfect Match

Leveraging the BEM (Block Element Modifier) naming convention for class names in my projects allows me to maintain a clear and structured approach to HTML markup. However, rather than filling these carefully named BEM classes with custom CSS, I now enhance them with Tailwind’s utility classes. This innovative blend harnesses the semantic organization and readability offered by BEM, alongside the efficiency and speed of development that Tailwind CSS brings to the table. This methodology optimizes the development process, combining the best of both worlds: the structured logic of BEM and the rapid, utility-first approach of Tailwind CSS.

An Example

If you’re crafting an FAQ section and applying the BEM (Block, Element, Modifier) naming convention, your HTML classes could be organized in the following manner to ensure readability, scalability, and maintainability:

<section class="faq">
      <h1 class="faq__title">Frequently Asked Questions</h1>
      <!-- FAQ Section -->
      <div class="faq__items">
        <details class="faq__item">
          <summary class="faq__item-summary">
            1. What is the Climate Crisis?
          </summary>
          <p class="faq__item-content">
            The Climate Crisis, also known as Global Warming....
          </p>
        </details>
       <!-- ... additional FAQ items ... -->
     </div>
</section>

Then, I’m adding my Tailwind classes:

<section class="faq max-w-3xl mx-auto px-4 bg-white shadow-lg rounded-xl py-6 space-y-8"
    <h1 class="faq__title text-2xl font-bold text-center">Frequently Asked Questions</h1>
    <!-- FAQ Section -->
    <div class="faq__items mt-6 space-y-4">
      <details class="faq__item border-t border-b py-3 space-y-2 hover:bg-blue-100 transition duration-300 ease-in-out">
        <summary class="faq__item-summary cursor-pointer text-lg font-semibold hover:text-green-600 transition duration-300 outline-none pl-2">
          1. What is the Climate Crisis?
        </summary>
        <p class="faq__item-content text-gray-700 p-6">
          The Climate Crisis, also known as Global Warming....
        </p>
      </details>
     <!-- ... additional FAQ items ... -->
   </div>
</section>

The @apply directive in Tailwind CSS is a remarkably potent feature that sometimes doesn’t get the recognition it deserves. It enables you to leverage Tailwind’s utility-first classes within your custom CSS, allowing for the removal of Tailwind classes from your HTML. This approach simplifies your markup while retaining the styling benefits of Tailwind. Here’s how it works:

.faq {
  @apply max-w-3xl mx-auto px-4 bg-white shadow-lg rounded-xl py-6 space-y-8;
}

.faq__title {
  @apply text-2xl font-bold text-center;
}

.faq__items {
  @apply mt-6 space-y-4;
}

.faq__item {
  @apply border-t border-b py-3 space-y-2 hover:bg-blue-100 transition duration-300 ease-in-out;
}

.faq__item-summary {
  @apply cursor-pointer text-lg font-semibold hover:text-green-600 transition duration-300 outline-none pl-2;
}

.faq__item-content {
  @apply text-gray-700 p-6;
}

So, instead of adding each individual utility class to the HTML element, we encapsulate them within our original classes. This keeps our HTML markup clean and our styles organised. It’s the perfect blend of structured CSS and the rapid prototyping capabilities offered by Tailwind’s utilities.

The final (and magic) cut: JIT in Tailwind CSS 3.0

The Just-In-Time (JIT) mode introduced in Tailwind CSS 3.0 acts as a custom tailor for your stylesheets. Rather than providing a generic, one-size-fits-all collection of styles, it precisely compiles only the utility classes you use within your project. This approach trims any unnecessary bulk from the CSS file, leading to a streamlined and efficiently structured output. Moreover, JIT mode significantly enhances the development workflow by offering an exceptionally fast feedback loop; styles are refreshed almost instantly upon modification. This synergy of efficiency and speed optimizes the development process, offering a polished, high-performance, and seamless experience.

he Just-In-Time (JIT) mode in Tailwind CSS brings a suite of benefits that significantly enhance both development and production workflows:

• Rapid Compilation Times: Traditional Tailwind compilation can range from 3–8 seconds with its CLI, extending to 30–45 seconds in webpack projects due to the latter’s difficulty with large CSS files. In contrast, JIT mode dramatically reduces this to approximately 800ms for even the most extensive projects, with incremental rebuilds as quick as 3ms, independent of the build tool utilized.
• All Variants Available by Default: Commonly, certain variants like focus-visible, active, disabled, etc., are not enabled by default to keep file sizes manageable. JIT mode, generating styles as needed, eliminates this limitation, allowing for immediate use of any variant. This capability extends to combining them in complex selectors like sm:hover:active:disabled:opacity-75, removing the need to manually configure variants.
• On-Demand Arbitrary Style Generation: The JIT mode accommodates the creation of highly tailored styles not predefined in your design system. For instance, if you require a specific margin that isn’t part of Tailwind’s default spacing scale, such as margin: 47px for a distinct layout adjustment, JIT allows you to craft this utility on the fly. You can achieve this by using square bracket notation, such as m-[47px], and it’s fully compatible with responsive variants too, like lg:m-[47px]. This flexibility means you can adapt your design with precision, without needing to write custom CSS for each unique scenario.
• Consistent CSS Across Environments: With JIT, styles are generated on an as-needed basis, rendering the purging of unused styles for production unnecessary. This ensures the CSS remains consistent across development and production environments, eliminating concerns over inadvertently removing critical styles for production.
• Enhanced Browser Performance in Development: The compact size of development builds mirrors that of production builds, sparing the browser from processing and managing large volumes of pre-generated CSS. This is particularly beneficial in projects with extensive configurations, leading to smoother and more responsive development tools.

These advantages underscore JIT mode’s role in streamlining the development process, offering a more efficient, flexible, and reliable approach to utilizing Tailwind CSS.