Why Tailwind JIT compiler is amazing

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Nice article, as always! 🙌
Just to make sure I understand, Tailwind JIT allows you to write custom CSS easier?
The JIT (Just in Time) compiler will actually build your CSS faster as the main goal. But this custom CSS is indeed easier.
Be aware it can only do custom css for elements already existing in Tailwind.
So w-1/2 exists but we can now do w-[20px] where the 20px is our custom part to it.
You're welcome glad you liked it!
WavePad Registration Code Free Crack Key gives you access to all of its functions. This program allows you to enjoy enhancing the beautification of your soundtrack. https://crackcool.com/wavepad-registration-code/
Oh nice look at that! Well done Savio
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

I only found out about this JIT Compiler a few days ago, during my Livestream with Stefan Natter.
During this Livestream, we got to use the JIT compiler, and I was super amazed by the speed, but more than that, the customization option!
I have been waiting for something like that, and it's spot on what you would expect.
Today I'll show you how to enable the JIT compiler and how you can leverage this custom CSS.
For this article, I'm going to use my simple HTML Tailwind starter project.
You can find the project on GitHub.
The first step is to add the JIT Compiler. We can do so by running the following command.
npm install -D @tailwindcss/jit tailwindcss postcss autoprefixer
Next up, we need to make sure this compiler is used.
For our project, we can open up the postcss.config.js file.
Adjust the file to look like this:
module.exports = {
plugins: {
'@tailwindcss/jit': {},
autoprefixer: {}
}
};
And that is all there is to it! Already amazing, right?
I'm sure every one of us ever needed a custom style. Perhaps you needed a fixed-width element, a custom size border, or translate, perhaps.
With the new JIT Compiler, we can do this in a breeze.
Imagine we need to create a fixed-width box. The box needs to be exactly 300x300px. We could, of course, extend Tailwind, but we can now even do this easier!
Simply add classnames like such:
<div class="w-[300px] h-[300px]">
Tailwind JIT Compiler
</div>
That is so cool!
Start the script with npm run dev and check out what's happening in the browser.

There you go, a square box and the classes are already reflecting in our CSS file!
You can find this project on the following GitHub link.
This stuff is next level, Thank you, Tailwind!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter