00:00:02 Before we dive into complex layouts, let's start with Tailwind Play, an interactive online playground for testing TailWind CSS styles.

00:00:10 I'll put the link to it down below this lesson.

00:00:13 And once you're there, you can delete all of the pre-generated code.

00:00:16 Instead, Let's Start with a basic hello world.

00:00:20 So far, super plain and super boring.

00:00:23 So, let's bring Tailwind into the mix.

00:00:26 As I already mentioned, TailWind provides a set of predefined utility classes to style elements without having to write custom CSS.

00:00:34 For example, we can very easily style this H1.

00:00:37 Just start by giving it a class and start typing text-.

00:00:42 And immediately, you'll see a drop-down with all of the related utilities.

00:00:47 This will include alignment, font sizes, colors, and more, making it super easy to explore and apply all these different styles.

00:00:55 So let's apply a property of Text-Center, TextLG, as well as TextBlue-400.

00:01:03 And just so we don't have to stare at this white screen while everything else is dark, I'll put it right below and head over into CSS and target the body

00:01:12 element by giving it a background color.

00:01:15 101.72a is this nice tailwind CSS color And now, if we want to apply some kind of a margin to this text element, you can say margin top 2, maybe,

00:01:25 which will apply a slight margin, to push it from the top.

00:01:28 And you could easily change the text color to something like cyan 400. That's looking great.

00:01:34 But now the main question is, how does tailwind CSS actually work behind the scenes?

00:01:39 Well, at the bottom here, there's a generated CSS tab.

00:01:43 Click on it, and it'll expand.

00:01:45 Here, you can find different sections.

00:01:48 All includes everything Tailwind generates, including default styles and theme-based utilities.

00:01:55 Next, there's theme which contains the Tailwind CSS built-in theme variables like colors, spacing, and more.

00:02:03 There's base which includes global styles like removing default margins from the body element.

00:02:08 And then there is the custom component styles.

00:02:11 I'll teach you how that works later.

00:02:13 Finally, the most important part, which are the utilities.

00:02:17 It contains actual CSS generated for each utility that you use.

00:02:22 For example, right now in our HTML, we have only TextCenter, TextLG, Scion 400, and MarginTop of 2. So let's see how each one of these utility classes

00:02:33 looks like when converted to plain CSS.

00:02:35 empty2 applies a margin top where they calculate some kind of a spacing here.

00:02:40 This is super nice because they're using CSS variables to make the whole system super modular.

00:02:45 They're not using absolute values like, like two pixels.

00:02:48 Text center simply applies a text align property of center.

00:02:51 text-lg not only changes the font size, which is what you would assume, but also modifies the line height to makes it look better.

00:02:58 And then cyan 400 simply changes color.

00:03:01 So if you quickly change this color from cyan to maybe something like green, you can see that it automatically gets replaced with another style right here.

00:03:09 And what that means is that Tailwind CSS generates styles on the fly, only for the classes we actually use.

00:03:17 This keeps our CSS lean and efficient.

00:03:21 Think of it like a Thanos finger snap.

00:03:23 Change a class and the styles adjust instantly.

00:03:27 Now, let's continue experimenting with some background colors, spacings, font styles, and borders.

00:03:32 Create a new div element that'll wrap the H1 that we have right here.

00:03:38 That'll look something like this.

00:03:40 And we can invent it properly.

00:03:42 Now, we can apply a class to this div and give it a bg-violet-200 color.

00:03:50 We can also give an h of 10 for the height, a w full, so it takes the full width of the container, border-2, Border-Violet – 600, rounded-md to round up

00:04:06 the corners a bit, margin-y of 4 to divide it from the top and bottom, and padding of 2. We can also change the h1 a bit by giving it a font of mono,

00:04:19 font-extra bold.

00:04:21 And there we go.

00:04:22 It says, hello world.

00:04:24 and we never entered another file.

00:04:26 we did everything within this HTML or later on this will be JSX or even TSX file because Tailwind is widely used in React and Next.js.

00:04:36 So let me actually break down what happened here.

00:04:40 WFool and H10 are width and height properties.

00:04:44 The fool simply sets the width to 100% of the container, and h10 simply provides about 2.5 rem or about 40 pixels of height.

00:04:53 BGviolet 200 applies a background color, And 200 stands for a shade of that color.

00:05:00 Next, Border 2 and Border Violet 600. Simply apply a border, first by giving it a Border Width, And of course, this gives it a border color.

00:05:11 Rounded MD applies a medium border radius to make the corners rounded.

00:05:16 Margin Y of 4 is interesting.

00:05:19 It applies in margin.

00:05:21 But why margin Y?

00:05:23 Well, you could have done margin top, which would apply something on the top.

00:05:27 You can do margin left for left.

00:05:30 right for right or bottom for bottom.

00:05:32 Or you can use Y for top and bottom, like Y-axis, or X for left and right.

00:05:39 It's super flexible.

00:05:40 The full notation looks something like this.

00:05:42 You say M, and then you either apply top, right, bottom left or Y or x, then the size you want to apply it.

00:05:49 And the same thing goes with the padding.

00:05:51 You can say padding, top, bottom, left, right, X, Y, whatever you want to do.

00:05:56 Or if you don't apply anything, it'll apply it on all sides.

00:06:00 Finally, we have text center, which you already know what it does.

00:06:03 Font simply applies a font family, and this changes the font weight.

00:06:08 And while we're here, we can also have a quick lesson on margins and paddings.

00:06:13 Many developers confuse the two.

00:06:15 Margin is an external spacing, which pushes the element away from others.

00:06:20 While padding is internal spacing so it adds space inside of an element.

00:06:26 So if I put this on the right side, so it's easier to see what's happening.

00:06:29 And if we increase margin-wide to something like 10, you'll see that it pushes more from top, but also from the bottom, even though we cannot see it.

00:06:37 If I increase the padding to, something, like padding of 6, You'll that adds more internal space.

00:06:43 But now, if you truly want to center this text, we also need to make this div a flex container, and give it a justify center,

00:06:50 as well as items center properties.

00:06:54 There we go.

00:06:54 So now you know a bit more about different types of properties that we can apply to different elements using Tailwind.

00:07:01 The possibilities are really endless and even though it might seem like I'm coming up with these names off the top of my head,

00:07:08 memorizing them is super simple once you get the hang of it.

00:07:11 And of course, another pro tip is if you want to figure out what the actual CSS value of a specific property is, just hover over it and you'll see exactly

00:07:20 what it does.

00:07:21 They even provided this nice comment to tell you exactly how many rems, or pixels, padding of 6 applies.

00:07:26 This was simple and fairly high level.

00:07:29 But in the next lesson, I'll let you know the Tailwind's superpower.