🤩
Windframe Import update is finally here!
postImage

Tailwind CSS CDN-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 CDN allows you to create designs, and 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.

Alternatively, you can use a simple website builder called Windframe to build a website without a single code or knowledge of writing code.

However, 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 Just-In-Time (JIT) Mode?
  • How to include the Tailwind CSS JIT CDN
  • Disadvantages of using the tailwind CSS JIT
  • JIT Mode in Tailwind CSS Version 3
  • Should I use this new addition?
  • Conclusion

What is Tailwind CSS JIT CDN mode?

Tailwind JIT CDN mode 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 Just-In-Time (JIT) Mode?

The Tailwind CSS JIT CDN Mode is really useful in your project for a ton of reasons, some of which we are going to explore in the following paragraphs. Tailwind CSS JIT CDN is very useful when you don't want to install Tailwind directly to your project. We are going to look at some other reasons why using Tailwind CDN mode is useful.

Fast build times

The Tailwind CSS JIT CDN 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, 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 mode, 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. It also improves your user experience for your users.

How do you add a JIT in Tailwind CSS?

To use the Tailwind CSS JIT CDN mode in your project, you need to attach it like you would JavaScript using the script tag.

html
<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 CDN

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.

Tailwind JIT not working

Running Tailwind JIT mode in react or Nextjs can be tricky. You can check out our article on How to use Tailwind CSS in Next. js and How to use Tailwind CSS in React If your Tailwind JIT mode is not working, you can check your Tailwind.config.js file to make sure the mode is set to Jit and the purge property has the correct template paths you are using. Just like the entry below.

js
purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],

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. You can use the tailwind CSS JIT CDN react on your react projects or any other technologies you may want to use them.

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.

Conclusion

Tailwind CSS is a utility-first CSS framework that offers a unique approach to CSS stylesheets. Rather than creating traditional CSS classes, Tailwind uses utility classes that are designed to be combined to create complex designs.

One of the benefits of using Tailwind is that it can be used as a Just-In-Time (JIT) CSS framework. This means that you can use Tailwind CSS without having to pre-process or compile your CSS stylesheets. Instead, Tailwind CSS is injected into your HTML pages using a tag.

Including Tailwind CSS in your HTML pages is simple. You will need to include the Tailwind CSS framework, and you will also need to include a Tailwind CSS stylesheet. You can either use the default Tailwind CSS stylesheet, or you can create a custom stylesheet.

Once you have included the necessary files, you can start using Tailwind CSS on your HTML pages.

Resources

Tailwind css CDN

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.Download the free react template

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

...