When building my project, I mostly use Tailwind CSS to beautify the project. This might sound a bit obsessive, but tailwind provides the very tool to try any design that comes to mind, and this is possible now more than ever with the introduction of the tailwind CSS JIT CDN.
All you will have to do is write some HTML classes with the tailwind classes, and they will be rendered on the front end of your application.
The sweet part is you don’t have to worry about installing node and dealing with the node modules.
Although, in this tailwind CSS tutorial, we will be breaking down what the tailwind CSS JIT CDN is, the advantages and drawbacks, including how to install it.
Table of content
⦁ what is tailwind CSS JIT CDN mode?
⦁ Why use the Tailwind CSS JIT Mode?
⦁ Disadvantages of using the tailwind CSS JIT
⦁ How to install Tailwind CSS JIT CDN
⦁ Should I use this new addition?
What is tailwind CSS JIT CDN mode?
Tailwind CSS JIT is a compiler introduced in the tailwind CSS version 2.1.
This new compiler generates templates on demand instead of creating everything in advance during the construction stage. These may not sound very interesting right now, but they offer many advantages to your front-end projects.
Why use the Tailwind CSS JIT Mode?
The JIT mode offers a lot of advantages for your project in many ways. We are going to look at some of the perks this new mode offers.
Fast build times
The time of compilation of your project is significant as this allows you to get things done.
The JIT mode makes the time for the compilation of your project super fast.
According to Tailwind, the compilation time with the CLI takes about 3-8s, and for the Webpack applications up to 30-45secs, 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 classes like “active” or “disable” are not usually enabled at default., but in the new tailwind CSS JIT, you don’t have to configure your variants again, as all variants are enabled by default.
Using the Arbitrary Values
It was challenging to use this feature before now. You would have to either define a new variant, use inline styles, or create a custom CSS class to use this value.
However, Tailwind CSS JIT mode allows you to use arbitrary values with the brackets.
You might argue that overusing this feature can make our Tailwind code messy. That’s true. Nevertheless, if you use it carefully, you can create beautiful designs precisely as you want and save time during development.
No custom CSS
We have all been in situations where we needed a specific value for our projects, and we had to create custom CSS, inline styles.
This had made our work too bothersome. But with the new Tailwind CSS JIT CDN, we can create arbitrary values in almost any of our Tailwind Class, allowing better designs for our projects.
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.
<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.
Design and code tailwind css websites 3x faster
We created a tool to visually build tailwind css components, prototypes, websites, and webapps. Ship projects faster using an intuitive tailwind builder and editor.Try Windframe out for free.
Top comments (0)