Hey guys, Kevin here, back with another video! Sorry, back with another post. This is kind of a follow up from my last post about why you should be using Tailwind (if you are not, at least give it a try). In this post, I want to talk about the best Tailwind feature from my point of view. I'm referring to the Just-in-time mode.
The just-in-time mode is a compiler for Tailwind that generates your styles on-demand as you write your CSS instead of generating everything in advance at initial build time. The obvious advantage is that the compiling times are much, much faster. But there are other cool things that you can do with this and I want to show you some of my favorite features.
Every variant is enabled out of the box
When you initially install Tailwind, not all variants are enabled by default. Things like “active” or “disabled” states don’t work for all properties. This is important so you don’t end up with a huge initial file and the compiling times are faster.
Since the JIT mode (short for just-in-time) builds the CSS right at the moment, you can use every variant in every property that you want. This will prevent you from looking at the documentation to investigate which properties have or don’t have variants enabled, and eventually it will save you some time.
Generate arbitrary styles without writing custom CSS
This is my favorite part of the JIT mode. Before, you needed a specific value, like a margin of 54px, you had to add it to your tailwind.config.js file, which in the long run could make you add a lot of values you only use one time.
To solve this, Tailwind added the option to generate values right in your classes. If you need a margin-top of 54px you can type it as “mt-[54px]” and this is going to generate the necessary styles.
<img class="absolute w-[300px] h-[400px] top-[-325px] right-[62px] md:top-[-400px] md:right-[80px]" src="/image.png"> <button class="bg-[#1da1f1]"> Works with background colors! </button> <div class="grid-cols-[1fr,700px,2fr]"> Also for grid columns </div>
Your CSS is identical in development and production
When you want to push your project to production, you have to purge your CSS file to remove all of the unnecessary styles, but since the JIT mode generates the CSS at the moment you don’t have to purge files anymore. Your development and production files are going to be the same.
After using this feature, it has made my Tailwind experience much better. The compiling times are faster, my tailwind.config.js file is shorter and I don’t have to worry about purging my production CSS files anymore.
I really recommend enabling the JIT if you really want to use the full power of Tailwind, here is the link so you can read more about it in their docs. Just remember to thank me later.