00:00:03 So how does Tailwind CSS actually work?

00:00:06 Before we dive in, let's quickly compare traditional CSS with Tailwind's utility-first approach.

00:00:12 So how do we normally write CSS?

00:00:14 Well, we create some elements and assign them CSS classes.

00:00:18 Something like a div with a container and an h1 with a container heading.

00:00:23 And then we define those classes in CSS, dot container, give it a display flex, justify content center, you know the drill.

00:00:31 And you can also style the heading.

00:00:33 Here, container and container headings are just custom classes with predefined styles.

00:00:38 But now let's rethink that with a utility-first mindset.

00:00:43 What if instead of writing custom class names, we broke styles into small, reusable utility classes?

00:00:50 Something like .flex will set a display of flex, item center will set the aligned items to center, and so on.

00:00:58 You can do the same thing for colors or even font sizes.

00:01:01 With these utilities in place, we can now structure our HTML like this.

00:01:06 You can create a div and give it class names of flex, justify center, item center.

00:01:12 And the same thing goes with a p tag.

00:01:14 See the difference?

00:01:15 We're still using classes, but instead of defining custom class names, we're composing styles directly with utility classes.

00:01:22 And this is exactly how Tailwind CSS works.

00:01:26 Every Tailwind class is just a predefined CSS rule.

00:01:30 For example, when we use flex, Tailwind generates that property behind the scenes.

00:01:35 And I get how this might feel like just a lot of extra work, but trust me, it'll save you hours because you won't have to worry about class names,

00:01:42 structuring styles with the BEM methodology, or managing gigantic CSS files.

00:01:47 You can just use the utilities and Tailwind does the rest.

00:01:51 But Tailwind Simplicity is also a cause for a lot of misconceptions around it.

00:01:56 There's a common myth when talking about Tailwind.

00:01:59 And that is, aren't all of these just inline styles?

00:02:02 We're basically writing everything on a single tag.

00:02:05 Inline.

00:02:06 So why can't we use just a regular CSS?

00:02:09 applying a style property with a padding of 10 and a color of blue.

00:02:13 Well, it's not really the same, because this doesn't allow you to use more advanced properties like pseudo classes, which we'll explore later on,

00:02:20 and they also don't give you access to media queries.

00:02:23 But even more importantly, Inline styles cannot be reused.

00:02:27 You have to rewrite them on every single element where you need them.

00:02:31 But Tailwind CSS utility classes, on the other hand, are completely reusable, which means that you can create a small set of reusable CSS classes and then

00:02:40 use them on whichever element you want across the entire application.

00:02:44 Hopefully, you will never again think that Tailwind is the same as inline styles.

00:02:48 And you're actually excited to see what more it brings to the table.

00:02:52 So let's dive deeper into this crash course so that very soon you can build a real world project so you can truly master it.