Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN
Tags: tailwindcss, frontend, tutorial, tooling
Published: 2022-09-18 01:25:15

---
title: Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN
published: true
date: 2021-01-10 01:16:04 UTC
tags: ["tailwindcss", "frontend", "tutorial", "tooling"]
canonical_url: https://www.devwares.com/blog//how-to-use-the-tailwind-css-JIT-CDN/
---

![Tailwind](https://tailwindcss.com) 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 nodes 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](https://www.devwares.com/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 Tailwindcss CDN
- Disadvantages of using the tailwind CSS JIT
- Tailwindcss cdn JIT not working
- 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.

Tailwindcss 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 Tailwindcss 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 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 to include the Tailwind CSS CDN

To use the Tailwind CSS 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 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 CSS CDN JIT not working

Running Tailwind JIT mode in react or Next.js can be tricky. You can check out our article on [How to use Tailwind CSS in Next.js](https://www.devwares.com/blog/tailwind-css-in-nextjs/) and [How to use Tailwind CSS in React](https://www.devwares.com/blog/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

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [How to create a Angular Bootstrap Sidebar](https://www.devwares.com/blog/how-to-create-an-angular-bootstrap-sidebar/)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)