‫Next up, let's do some basic text styling.
‫But before we go do that,
‫I actually wanted to show you something else
‫in the previous lecture,
‫but let's now go do that.
‫Which is that of course we cannot only use
‫these Tailwind classes right here in the JSX,
‫but also inside our HTML.
‫So for example, we can add some classes here to the body
‫that we want every element on the page to inherit
‫or that we want to set on the entire body element.
‫So typically that is like a background color,
‫or a text color that we want the entire page to inherit.
‫So that's pretty standard CSS
‫which I'm assuming at this point that you know about.
‫So throughout this entire section,
‫I'm assuming that you are familiar at least
‫with the fundamentals of CSS.
‫Cause otherwise, without knowing CSS
‫it's gonna be very hard to understand Tailwind.
‫But anyway, here we do not use the class name,
‫but just class, which is regular HTML.
‫And so let's give this here a background color of stone 100.
‫And so you see that it turned a little bit darker here,
‫so a bit gray.
‫And then let's also give it the text color of
‫also stone and 700.
‫And so notice how this element, this element
‫now have exactly that color.
‫So they inherited this gray color right here
‫from the body element.
‫And so then we can actually remove that
‫from here, from the H1.
‫Great, so we already learned a little bit
‫about formatting text actually, or we didn't really learn
‫but we already used it in the first Tailwind lecture.
‫So we learned that we can basically position text
‫with text dash center,
‫or we can also use text dash right,
‫to center it to the right, or to the left,
‫which is not really necessary
‫because that's also the default.
‫Now, the most common thing
‫I would argue that we do with text
‫is to define the text size and the text weight,
‫or the font weight.
‫And so let's again come to our documentation
‫and then here we have all the most important classes
‫regarding typography.
‫And so let's start with the font size.
‫And as always, you can also just search,
‫for example, for text size right here,
‫or actually it should be font size
‫because that's the name of the CSS property.
‫So here you have all the classes that we can use
‫in order to style the size of text.
‫So text, extra small, small base, then large, extra large,
‫and then all the way to nine xl.
‫So which then gives us this font size of eight rem.
‫And notice how this not only sets the front size
‫but also the line height,
‫which immediately makes the design look a bit better.
‫Then let's see what else we have here.
‫But these are really just examples.
‫So usually the most important thing
‫is right here at the top.
‫And so this is how we got this text extra large right here.
‫Now this class name was for me
‫one of the more confusing ones,
‫because font size is the name of the CSS property.
‫But then in Tailwind it is called text for some reason.
‫But again, after some time
‫you will just automatically memorize this.
‫Then for the font weight,
‫the property is actually called font and then something.
‫So let's again search for that.
‫And even better, let's do it right here.
‫So font weight, and here we go.
‫So instead of having to mess with these different numbers,
‫now we just have names.
‫So font, semi-bold for example,
‫which is the one that we used for H1 there.
‫So this one right here is semi-bold.
‫And so I think that here in this component
‫we are actually finished.
‫So let's come here to the CartOverview again,
‫and let's do some changes here as well.
‫So first, let's make this text here also semi-bold.
‫And so as we start typing out these classes,
‫we will slowly start memorizing them automatically.
‫And finally, let's also make all of this uppercase
‫so both the link and the paragraph,
‫and so we can do that here in the parent element.
‫And so to make text uppercase,
‫all we have to do is the uppercase class.
‫Yep, that worked.
‫And so let's move on to the header.
‫And here, let's do actually the same thing.
‫So make this here upper case as well.
‫And here in this link,
‫I now want to also give it some letter spacing.
‫So let's try to see what happens
‫if we start typing letter spacing.
‫Well, nothing really happens,
‫while for example the uppercase class name
‫is pretty intuitive.
‫So even without knowing it,
‫maybe we could start writing uppercase
‫and then we would start seeing the auto complete coming on.
‫While actually that's not happening here.
‫Let's try that again after saving,
‫well, that's not really working for some reason.
‫Well, maybe I need to close my VS Code, and restart it,
‫but I'm not gonna do that.
‫But anyway, the class name for letter spacing
‫is a bit confusing.
‫So for me, that was one of the hardest ones.
‫And so let's just search for that here.
‫And so here we have the actual name, which is this tracking.
‫And so let's try this widest one.
‫So tracking widest and nice.
‫So at this, we got some space here between our letters.
‫Now notice how this tracking that we just used
‫is actually the highest one.
‫So it's the widest one that we can use.
‫But what if we want more?
‫Well, let's come down here.
‫So all of this is not really important,
‫at least not for now, because what we're concerned with here
‫right now is to give this year an arbitrary value.
‫So some other value that is not covered
‫by one of the Tailwind classes.
‫So in this case,
‫we can instead of defining this keyword here,
‫use the square brackets and then place any value
‫that we want in here.
‫So that can be pixels or rems, or whatever we want.
‫So let's say we wanted five pixels.
‫And so you see that then changed to five pixels,
‫or we can say also two rem like this.
‫And then we would get this huge space.
‫Now, okay, so that's not really so relevant,
‫and shouldn't be used all the time
‫but it's nice to know that this works in Tailwind.
‫And of course it doesn't only work with the tracking
‫where it's not really that important,
‫but it also works for example here with the text size.
‫So for example here we could also say text
‫should be 100 pixels, then it would become huge.
‫So even though there is no actual Tailwind class
‫for these 100 pixels.
‫So there is something similar maybe 96 pixels
‫or something like that.
‫But something truly huge, let's say we wanted 300,
‫then we would really have to use like this escape hatch.
‫So this is basically an escape hatch
‫where we can escape the predefined
‫in more rigid classes of Tailwind.
‫But most of the time we shouldn't do this
‫and just stick to the classes that Tailwind gives us.
‫99% of the cases, they are more than enough.
‫And now just to finish,
‫I want to also style this user right here.
‫So let's actually create a new component
‫here in the user feature folder.
‫And then here, let's for now just hard code my name again.
‫But later on this will actually come from Redux.
‫So here let's now include that.
‫So username like this,
‫and then let's just style it a little bit.
‫So let's make the text smaller,
‫so it text-sm and also make it semi-bold again.
‫So this time we get the auto completion,
‫and that is then really, really helpful.
‫Now, okay and with this, we have styled here
‫most of the text that is visible right now.
‫Of course, we still have all these other pages to style
‫but we will leave that for a bit later.