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 dropdown 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 of these different styles.

00:00:55 So let's apply a property of text-center, text-lg, as well as text-blue-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.

00:01:19 And now, if we want to apply some kind of a margin to this text element, you can say margin top 2, maybe, which will apply a slight margin to push it from

00:01:28 the top, and you can 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's the custom component styles.

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

00:02:12 And finally, the most important part, which are the utilities.

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

00:02:22 For example, right now in our HTML, we have only text-center, text-lg, sine 400, and margin-top 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 make it look better.

00:02:58 And then cyan 400 simply changes the 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, and we can indent 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 it an h of 10 for the height, a w full, so it takes the full width of the container, border-2, border-violet-600,

00:04:04 rounded-md to round up the corners a bit, margin-y of 4 to divide it a bit from the top and bottom, and padding of 2. We can also change the h1 a bit by

00:04:17 giving it a font of mono, font-extra bold.

00:04:22 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, Border2 and BorderViolet 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 a 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 can either apply top, right, bottom, left, or Y or X, and 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 I 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 And if I increase the padding to something like padding of 6, you'll see that it adds more internal space.

00:06:43 But now if we 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.

00:07:03 And even though it might seem like I'm coming up with these names off the top of my head, 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 superpower.