🥳
WindFrame is here: Design, prototype and code
sale icon End of Summer Sale 🎁 Get Contrast PRO UI library + admin template with 5 admin dahsboards, 23 pages and 10000+ components at 60% off 🎉
postImage

How to use the Tailwind CSS JIT CDN

blogImage

By Emmanuel Chinonso

Web Developer

Tailwind CSS is a utility-first CSS framework. It provides you with CSS classes that you can use to create designs for your web pages quickly and with ease.

The introduction of the Tailwind CSS JIT CDN allows you to create designs, try out multiple designs for your projects without worrying about installing node and dealing with the node modules.

With the Tailwind CSS JIT CDN all we need to create beautiful projects is to write some HTML with the tailwind classes, and they will be rendered on the front end of your application.

This blog will walk you through what exactly the Tailwind CSS JIT CDN is, how to install the JIT CDN, and the advantages and drawbacks of using the Tailwind CSS JIT CDN in your project.

Table of content

  • What is tailwind CSS JIT CDN mode?
  • Why use the Tailwind CSS JIT Mode?
  • How to include the Tailwind CSS JIT CDN
  • Disadvantages of using the tailwind CSS JIT
  • Should I use this new addition?

What is Tailwind CSS JIT CDN mode?

Tailwind CSS JIT is a compiler introduced in tailwind CSS version 2.1, JIT which stands for Just-in-Time is a new compiler that generates templates on demand instead of creating everything in advance during the construction stage.

Why use the Tailwind CSS JIT Mode?

The Tailwind CSS JIT Mode is really useful in your project for a ton of reasons, some of which we are going to explore in the following paragraphs.

Fast build times

The Tailwind CSS JIT Mode reduces significantly the time it takes your project to compile initially.

According to the Tailwind CSS documentation, the compilation time with the Tailwind CSS CLI takes about 3-8s, and for Webpack applications up to 30-45s, but with the new JIT compiler, that time is shortened to 800ms, regardless of what tool you are using.

Using the variants

When using the Tailwind CSS CDN, the variants like active or disable are not usually enabled at default because of file-size considerations, but with the Tailwind CSS JIT compiler, we get access to whatever variants we like, as the styles are generated on demand.

Using the Arbitrary Values

With the Tailwind CSS JIT CDN you can generate arbitrary styling without writing custom CSS. We do so using square bracket notations like h-[30px]

Before the Tailwind CSS JIT CDN it was challenging to use arbitrary styling. You would have to either define a new variant, use inline styles, or create a custom CSS class to use this value.

No purge CSS needed

Unlike when using the previous tailwind CSS version where you will need to purge the CSS during production.

With the new Tailwind CSS JIT CDN you won’t need to purge any CSS because the staging styles are the same as the production styles.

Better performance

With the Tailwind CSS JIT CDN the browser does not have to load heavy CSS files initially as the CSS files are generated on demand. This makes your web pages load a lot faster, especially in large projects.

How to include the Tailwind CSS JIT CDN

To use the JIT mode in your project with the Tailwind CSS JIT CDN, include the JavaScript CDN in your code.

1<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>

It’s completely open-source, you can check it out on their Github.

Disadvantages of using the tailwind CSS JIT

One of the downsides of using the tailwind CSS JIT CDN is that the arbitrary values can create an undocumented mess, leaving the risk of inconsistent designs.

However, this is true when you use this feature too often, so it should be used with caution.

Should I use this new addition?

The question of whether you can use this new production is entirely dependent on what you are working on.

Ultimately, the tailwind CSS JIT mode is relatively new, and the tailwind team is still improving on the details of the mode and will take a while before you can use them on production-grade applications.

However, you can use it for your projects.

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...