1 00:00:01,459 --> 00:00:03,600 ‫(Jonas speaking) Let's now start to really dive 2 00:00:03,600 --> 00:00:07,983 ‫into Tailwind by learning how to work with colors. 3 00:00:09,330 --> 00:00:10,380 ‫And to start, 4 00:00:10,380 --> 00:00:15,000 ‫let's go back to Tailwind's excellent documentation. 5 00:00:15,000 --> 00:00:18,000 ‫So, whenever you are writing some Tailwind 6 00:00:18,000 --> 00:00:21,120 ‫I think it's always a good idea to keep this 7 00:00:21,120 --> 00:00:23,820 ‫documentation open at all times, 8 00:00:23,820 --> 00:00:27,731 ‫because this documentation is really, really well made 9 00:00:27,731 --> 00:00:29,870 ‫and will allow you to find what you're 10 00:00:29,870 --> 00:00:32,130 ‫looking for very fast. 11 00:00:32,130 --> 00:00:34,279 ‫And so with this, you will be learning the most 12 00:00:34,279 --> 00:00:37,623 ‫important Tailwind classes in no time. 13 00:00:40,528 --> 00:00:42,600 ‫So let's then come again here through the menu. 14 00:00:42,600 --> 00:00:46,713 ‫And of course, if your window is a bit bigger, like this. 15 00:00:48,240 --> 00:00:50,340 ‫Yeah, let's actually leave it like this, 16 00:00:50,340 --> 00:00:54,120 ‫then we don't have to always go to that menu. 17 00:00:54,120 --> 00:00:56,910 ‫So let's come here to the customization part, 18 00:00:56,910 --> 00:01:00,600 ‫and then let's check out Tailwinds colors. 19 00:01:00,600 --> 00:01:03,780 ‫So Tailwind comes with all these different 20 00:01:03,780 --> 00:01:06,420 ‫color palettes here, predefined. 21 00:01:06,420 --> 00:01:09,794 ‫And so what usually we do when we are designing a page 22 00:01:09,794 --> 00:01:14,130 ‫is to select like one gray color. 23 00:01:14,130 --> 00:01:17,190 ‫So that would be one of these right here. 24 00:01:17,190 --> 00:01:21,660 ‫And then we also have some like main or base color 25 00:01:21,660 --> 00:01:24,390 ‫for our brand or for the application. 26 00:01:24,390 --> 00:01:27,570 ‫So that's going to be one of these other colors. 27 00:01:27,570 --> 00:01:30,930 ‫Now of course, we can also use our own color palettes 28 00:01:30,930 --> 00:01:34,590 ‫simply by adding them to Tailwinds config file, 29 00:01:34,590 --> 00:01:37,170 ‫so to this file right here. 30 00:01:37,170 --> 00:01:39,420 ‫But for now, we will not do that. 31 00:01:39,420 --> 00:01:42,843 ‫And instead we will just select some colors from here. 32 00:01:44,490 --> 00:01:48,480 ‫So our main color will be this yellow here. 33 00:01:48,480 --> 00:01:52,800 ‫And so that's why we used text yellow 500 here 34 00:01:52,800 --> 00:01:54,420 ‫for this H one. 35 00:01:54,420 --> 00:01:57,000 ‫So this color name and this number right here 36 00:01:57,000 --> 00:02:00,840 ‫maps exactly to the colors that we have here. 37 00:02:00,840 --> 00:02:05,550 ‫So this is the yellow and this is the shade of 500. 38 00:02:05,550 --> 00:02:10,113 ‫And as you see, they vary here between 50 and 950. 39 00:02:11,070 --> 00:02:14,580 ‫And so if we wanted this H one here to be a bit darker 40 00:02:14,580 --> 00:02:18,225 ‫then we could use for example, a 700 and then 41 00:02:18,225 --> 00:02:20,790 ‫that got a little bit darker. 42 00:02:20,790 --> 00:02:23,670 ‫Or of course we could also go really bright. 43 00:02:23,670 --> 00:02:27,150 ‫So something like this, but 500 works best 44 00:02:27,150 --> 00:02:28,533 ‫in this situation. 45 00:02:29,580 --> 00:02:34,140 ‫So you see that to change the color of text, we use text 46 00:02:34,140 --> 00:02:38,010 ‫and then dash the color and then dash the shade. 47 00:02:38,010 --> 00:02:41,400 ‫So basically the intensity of the color as we have 48 00:02:41,400 --> 00:02:42,577 ‫it right here. 49 00:02:42,577 --> 00:02:46,766 ‫Now, if you didn't know yet how to style the color of text 50 00:02:46,766 --> 00:02:49,620 ‫then you could come here. 51 00:02:49,620 --> 00:02:51,960 ‫So here also in the sidebar, 52 00:02:51,960 --> 00:02:55,380 ‫we basically have all these different properties 53 00:02:55,380 --> 00:02:58,230 ‫or all these different classes that we need. 54 00:02:58,230 --> 00:03:01,920 ‫So here in Typography we have, for example, the text color 55 00:03:01,920 --> 00:03:05,700 ‫but even easier than scrolling up and down here all the time 56 00:03:05,700 --> 00:03:08,430 ‫is this really nice search bar. 57 00:03:08,430 --> 00:03:09,660 ‫So you can just click here 58 00:03:09,660 --> 00:03:13,440 ‫or at any time hit Control or Command K, 59 00:03:13,440 --> 00:03:18,440 ‫and then here you can search for example, for text color. 60 00:03:19,260 --> 00:03:22,500 ‫And so that will then bring you to that page. 61 00:03:22,500 --> 00:03:25,020 ‫And so then here, indeed it shows you 62 00:03:25,020 --> 00:03:29,040 ‫that we can control the text color using text dash 63 00:03:29,040 --> 00:03:30,783 ‫and then the color itself. 64 00:03:32,610 --> 00:03:37,610 ‫So with this name of the color and then the intensity 65 00:03:37,740 --> 00:03:41,010 ‫we can also give it some opacity as we can see here. 66 00:03:41,010 --> 00:03:43,473 ‫But let's leave that for later. 67 00:03:44,850 --> 00:03:45,683 ‫Okay. 68 00:03:46,650 --> 00:03:50,490 ‫Now sometimes we also need this color set to inherit. 69 00:03:50,490 --> 00:03:52,620 ‫And so then we can use this class 70 00:03:52,620 --> 00:03:55,200 ‫or we need to set it to transparent. 71 00:03:55,200 --> 00:03:56,970 ‫Then we can use this class. 72 00:03:56,970 --> 00:03:59,070 ‫And really here you can check out 73 00:03:59,070 --> 00:04:02,700 ‫all the classes that are available. 74 00:04:02,700 --> 00:04:06,513 ‫So to set the color of some text. 75 00:04:07,770 --> 00:04:10,290 ‫So that's one way where we use color. 76 00:04:10,290 --> 00:04:13,110 ‫And another one is background color. 77 00:04:13,110 --> 00:04:15,123 ‫So let's try it for that. 78 00:04:16,410 --> 00:04:19,200 ‫So background color, and there it is. 79 00:04:19,200 --> 00:04:20,430 ‫And so here you see 80 00:04:20,430 --> 00:04:22,680 ‫that basically we set the background color 81 00:04:22,680 --> 00:04:26,760 ‫of some element with bg, dash, and then again 82 00:04:26,760 --> 00:04:30,213 ‫the name and the intensity of the color that we want. 83 00:04:31,170 --> 00:04:33,210 ‫So that's pretty intuitive I think. 84 00:04:33,210 --> 00:04:36,360 ‫So PG just stands for background. 85 00:04:36,360 --> 00:04:38,610 ‫And so let's try that out. 86 00:04:38,610 --> 00:04:41,493 ‫And let's start with our header element. 87 00:04:43,470 --> 00:04:46,980 ‫So let's give it the same yellow here as the background. 88 00:04:46,980 --> 00:04:49,113 ‫And so we just type bg, 89 00:04:50,400 --> 00:04:52,803 ‫yellow 500, 90 00:04:53,700 --> 00:04:55,440 ‫and beautiful. 91 00:04:55,440 --> 00:04:56,643 ‫So there it is. 92 00:04:58,020 --> 00:05:00,930 ‫Now let's also style here, 93 00:05:00,930 --> 00:05:04,320 ‫this card overview. 94 00:05:04,320 --> 00:05:09,320 ‫So let's come here and the color that I want to select. 95 00:05:09,660 --> 00:05:13,053 ‫So let's come back here to the overview of all the colors. 96 00:05:14,700 --> 00:05:16,470 ‫Where is that? 97 00:05:16,470 --> 00:05:17,373 ‫Right here. 98 00:05:18,750 --> 00:05:22,620 ‫So I'm actually going to select this stone gray right here 99 00:05:22,620 --> 00:05:25,560 ‫because it has a bit of this brown touch 100 00:05:25,560 --> 00:05:28,740 ‫which compliments the yellow color very nicely. 101 00:05:28,740 --> 00:05:31,830 ‫So these ones up here are a bit more bluish 102 00:05:31,830 --> 00:05:33,300 ‫so they are a bit colder. 103 00:05:33,300 --> 00:05:35,910 ‫And then these grays here get a bit warmer. 104 00:05:35,910 --> 00:05:39,933 ‫And so I'm looking for one of these more warmer grays. 105 00:05:41,190 --> 00:05:42,023 ‫All right. 106 00:05:44,370 --> 00:05:48,300 ‫So let's add that background color right here. 107 00:05:48,300 --> 00:05:51,150 ‫So BG stone. 108 00:05:51,150 --> 00:05:52,500 ‫And then let's see what happens 109 00:05:52,500 --> 00:05:56,970 ‫if we go for the darkest one, which is 950. 110 00:05:56,970 --> 00:06:00,633 ‫So that's almost black, so that's maybe a bit too much. 111 00:06:01,500 --> 00:06:05,973 ‫Let's see, 900, and that's still pretty black. 112 00:06:07,230 --> 00:06:10,710 ‫And 800 I think looks just right. 113 00:06:10,710 --> 00:06:12,480 ‫So let's leave it like this. 114 00:06:12,480 --> 00:06:14,880 ‫But then we have the problem that the texture 115 00:06:14,880 --> 00:06:17,430 ‫becomes too dark as well. 116 00:06:17,430 --> 00:06:21,270 ‫And so let's immediately change the text color as well. 117 00:06:21,270 --> 00:06:23,193 ‫So let's say text. 118 00:06:24,180 --> 00:06:27,030 ‫And instead of making it completely white 119 00:06:27,030 --> 00:06:29,532 ‫which we also could by doing this 120 00:06:29,532 --> 00:06:31,600 ‫and now we cannot really see it 121 00:06:32,640 --> 00:06:34,740 ‫let's maybe make this a bit smaller again. 122 00:06:35,940 --> 00:06:38,790 ‫So usually white color doesn't look so good 123 00:06:38,790 --> 00:06:41,832 ‫and instead it's best to use the same color 124 00:06:41,832 --> 00:06:44,250 ‫but with a lighter shade. 125 00:06:44,250 --> 00:06:48,180 ‫So let's use a 200, and that looks just right. 126 00:06:48,180 --> 00:06:50,703 ‫So with this, the contrast isn't too high. 127 00:06:51,570 --> 00:06:55,920 ‫Now, here, since I want this link actually to stand out 128 00:06:55,920 --> 00:07:00,030 ‫let's make this paragraph then just a bit darker. 129 00:07:00,030 --> 00:07:05,030 ‫So let's say text stone 300 and yeah, nice. 130 00:07:05,370 --> 00:07:07,140 ‫So just a very small touch. 131 00:07:07,140 --> 00:07:09,960 ‫But since we have all these colors available 132 00:07:09,960 --> 00:07:12,810 ‫why not just use them to create a little bit 133 00:07:12,810 --> 00:07:14,343 ‫of visual hierarchy here? 134 00:07:15,330 --> 00:07:19,740 ‫All right, and now let's go back here to home 135 00:07:19,740 --> 00:07:21,390 ‫because I want to style this here 136 00:07:21,390 --> 00:07:23,480 ‫in a bit of a different way. 137 00:07:23,480 --> 00:07:27,660 ‫So right now the entire text is this yellow here 138 00:07:27,660 --> 00:07:29,850 ‫but actually I want it to be gray. 139 00:07:29,850 --> 00:07:32,490 ‫And then only this part to be yellow. 140 00:07:32,490 --> 00:07:35,823 ‫So to have, again, some nice contrast there. 141 00:07:36,840 --> 00:07:40,020 ‫So let's make this one here actually again 142 00:07:40,020 --> 00:07:42,420 ‫with our stone color. 143 00:07:42,420 --> 00:07:44,760 ‫And then 700. 144 00:07:44,760 --> 00:07:47,880 ‫So this is a color that looks really nice 145 00:07:47,880 --> 00:07:50,160 ‫on top of a white background. 146 00:07:50,160 --> 00:07:54,183 ‫And then let's just wrap this here into a span, 147 00:07:57,570 --> 00:07:59,460 ‫just like this. 148 00:07:59,460 --> 00:08:01,620 ‫And then let's give this one here 149 00:08:01,620 --> 00:08:05,493 ‫the text color of yellow 500, 150 00:08:06,660 --> 00:08:08,070 ‫more like this. 151 00:08:08,070 --> 00:08:11,010 ‫And yeah, there we go. 152 00:08:11,010 --> 00:08:13,980 ‫Great. And this is essentially how you work 153 00:08:13,980 --> 00:08:16,170 ‫with colors in Tailwind. 154 00:08:16,170 --> 00:08:18,420 ‫So you need to know the name of the color 155 00:08:18,420 --> 00:08:21,120 ‫and then whenever some color is necessary 156 00:08:21,120 --> 00:08:23,760 ‫like in a background or for text 157 00:08:23,760 --> 00:08:27,210 ‫you just add the color name and the color shade. 158 00:08:27,210 --> 00:08:31,320 ‫And then Tailwind will transform this to our actual CSS. 159 00:08:31,320 --> 00:08:34,470 ‫So in this case, this is the color that we get here. 160 00:08:34,470 --> 00:08:38,130 ‫And of course, we can also inspect this right here 161 00:08:38,130 --> 00:08:43,130 ‫in our dev tools, at least if we had a bit of space. 162 00:08:43,200 --> 00:08:47,700 ‫And yeah, so here are exactly the classes that we add 163 00:08:47,700 --> 00:08:49,500 ‫so there's no transformation. 164 00:08:49,500 --> 00:08:52,560 ‫It all simply gets applied exactly 165 00:08:52,560 --> 00:08:56,673 ‫in the same way that we write the classes in our markup.