‫(Jonas speaking) Let's now start to really dive
‫into Tailwind by learning how to work with colors.
‫And to start,
‫let's go back to Tailwind's excellent documentation.
‫So, whenever you are writing some Tailwind
‫I think it's always a good idea to keep this
‫documentation open at all times,
‫because this documentation is really, really well made
‫and will allow you to find what you're
‫looking for very fast.
‫And so with this, you will be learning the most
‫important Tailwind classes in no time.
‫So let's then come again here through the menu.
‫And of course, if your window is a bit bigger, like this.
‫Yeah, let's actually leave it like this,
‫then we don't have to always go to that menu.
‫So let's come here to the customization part,
‫and then let's check out Tailwinds colors.
‫So Tailwind comes with all these different
‫color palettes here, predefined.
‫And so what usually we do when we are designing a page
‫is to select like one gray color.
‫So that would be one of these right here.
‫And then we also have some like main or base color
‫for our brand or for the application.
‫So that's going to be one of these other colors.
‫Now of course, we can also use our own color palettes
‫simply by adding them to Tailwinds config file,
‫so to this file right here.
‫But for now, we will not do that.
‫And instead we will just select some colors from here.
‫So our main color will be this yellow here.
‫And so that's why we used text yellow 500 here
‫for this H one.
‫So this color name and this number right here
‫maps exactly to the colors that we have here.
‫So this is the yellow and this is the shade of 500.
‫And as you see, they vary here between 50 and 950.
‫And so if we wanted this H one here to be a bit darker
‫then we could use for example, a 700 and then
‫that got a little bit darker.
‫Or of course we could also go really bright.
‫So something like this, but 500 works best
‫in this situation.
‫So you see that to change the color of text, we use text
‫and then dash the color and then dash the shade.
‫So basically the intensity of the color as we have
‫it right here.
‫Now, if you didn't know yet how to style the color of text
‫then you could come here.
‫So here also in the sidebar,
‫we basically have all these different properties
‫or all these different classes that we need.
‫So here in Typography we have, for example, the text color
‫but even easier than scrolling up and down here all the time
‫is this really nice search bar.
‫So you can just click here
‫or at any time hit Control or Command K,
‫and then here you can search for example, for text color.
‫And so that will then bring you to that page.
‫And so then here, indeed it shows you
‫that we can control the text color using text dash
‫and then the color itself.
‫So with this name of the color and then the intensity
‫we can also give it some opacity as we can see here.
‫But let's leave that for later.
‫Okay.
‫Now sometimes we also need this color set to inherit.
‫And so then we can use this class
‫or we need to set it to transparent.
‫Then we can use this class.
‫And really here you can check out
‫all the classes that are available.
‫So to set the color of some text.
‫So that's one way where we use color.
‫And another one is background color.
‫So let's try it for that.
‫So background color, and there it is.
‫And so here you see
‫that basically we set the background color
‫of some element with bg, dash, and then again
‫the name and the intensity of the color that we want.
‫So that's pretty intuitive I think.
‫So PG just stands for background.
‫And so let's try that out.
‫And let's start with our header element.
‫So let's give it the same yellow here as the background.
‫And so we just type bg,
‫yellow 500,
‫and beautiful.
‫So there it is.
‫Now let's also style here,
‫this card overview.
‫So let's come here and the color that I want to select.
‫So let's come back here to the overview of all the colors.
‫Where is that?
‫Right here.
‫So I'm actually going to select this stone gray right here
‫because it has a bit of this brown touch
‫which compliments the yellow color very nicely.
‫So these ones up here are a bit more bluish
‫so they are a bit colder.
‫And then these grays here get a bit warmer.
‫And so I'm looking for one of these more warmer grays.
‫All right.
‫So let's add that background color right here.
‫So BG stone.
‫And then let's see what happens
‫if we go for the darkest one, which is 950.
‫So that's almost black, so that's maybe a bit too much.
‫Let's see, 900, and that's still pretty black.
‫And 800 I think looks just right.
‫So let's leave it like this.
‫But then we have the problem that the texture
‫becomes too dark as well.
‫And so let's immediately change the text color as well.
‫So let's say text.
‫And instead of making it completely white
‫which we also could by doing this
‫and now we cannot really see it
‫let's maybe make this a bit smaller again.
‫So usually white color doesn't look so good
‫and instead it's best to use the same color
‫but with a lighter shade.
‫So let's use a 200, and that looks just right.
‫So with this, the contrast isn't too high.
‫Now, here, since I want this link actually to stand out
‫let's make this paragraph then just a bit darker.
‫So let's say text stone 300 and yeah, nice.
‫So just a very small touch.
‫But since we have all these colors available
‫why not just use them to create a little bit
‫of visual hierarchy here?
‫All right, and now let's go back here to home
‫because I want to style this here
‫in a bit of a different way.
‫So right now the entire text is this yellow here
‫but actually I want it to be gray.
‫And then only this part to be yellow.
‫So to have, again, some nice contrast there.
‫So let's make this one here actually again
‫with our stone color.
‫And then 700.
‫So this is a color that looks really nice
‫on top of a white background.
‫And then let's just wrap this here into a span,
‫just like this.
‫And then let's give this one here
‫the text color of yellow 500,
‫more like this.
‫And yeah, there we go.
‫Great. And this is essentially how you work
‫with colors in Tailwind.
‫So you need to know the name of the color
‫and then whenever some color is necessary
‫like in a background or for text
‫you just add the color name and the color shade.
‫And then Tailwind will transform this to our actual CSS.
‫So in this case, this is the color that we get here.
‫And of course, we can also inspect this right here
‫in our dev tools, at least if we had a bit of space.
‫And yeah, so here are exactly the classes that we add
‫so there's no transformation.
‫It all simply gets applied exactly
‫in the same way that we write the classes in our markup.