00:00:02 Tailwind CSS isn't just about predefined utility classes.

00:00:06 It's also incredibly flexible thanks to its just-in-time compiler, also known as JIT.

00:00:13 The JIT compiler generates styles on demand, which means that Tailwind only includes the exact styles your project uses,

00:00:20 keeping your final CSS small and efficient.

00:00:23 For example, let's say you want to rename this H1 to jsmastery.pro.

00:00:29 which is the URL of a code platform we've been building for months that allows you to create custom learning paths.

00:00:34 And also, let's say you want to give it a font size of something like 13 pixels, which is not a predefined tailwind utility.

00:00:43 Normally, you would have to create an inline style or give it a custom class, but with the JIT compiler, you can do this instead.

00:00:51 Text dash 13 pixels within square brackets, just like this.

00:00:57 or you can do something like 20 or even 30. It is completely up to you.

00:01:03 Any value you want, you can apply it automatically, and the JIT compiler will add it to the generated CSS.

00:01:10 Removing all the unused style, only keeping the used ones, keeping your CSS bundle as small as possible.

00:01:17 So why is this JIT compiler such a big thing?

00:01:20 Well, first of all, because it optimizes performance, generating only what you need, It gives you faster build times because it doesn't need to pre-compile

00:01:29 thousands of different classes.

00:01:30 It supports arbitrary values, which means that you can pass any custom size, color, or property to make your website super unique.

00:01:38 And it works seamlessly in both development and production.

00:01:43 And the best part is that it is completely built into Tailwind by default without any extra setup.

00:01:48 So now that you understand the core mechanics behind how Tailwind CSS works, let's move on to layouts and Flexbox.

00:01:56 Because knowing how to style elements is useless if you don't know how to position them.