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 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.
<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 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.
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 grid-How to use tailwind CSS grid templates in your project
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind form-How to create and style a Responsive Form using Tailwind CSS
How to use tailwind CSS padding, margin and border in your project
How to create a beautiful React Bootstrap select with icons.
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind Modal-How to create a React Modal using Tailwind CSS.
How to Implement a React Step Progress Bar Using Tailwind CSS
Top comments (0)