1 00:00:00,240 --> 00:00:03,840 In this lecture, we're going to get some practice with tailwind. 2 00:00:04,140 --> 00:00:06,000 Our app is partially broken. 3 00:00:06,330 --> 00:00:09,780 There are two problems we're going to tackle in this lecture. 4 00:00:10,050 --> 00:00:13,290 The text, color and font family need to change. 5 00:00:13,620 --> 00:00:21,390 The first problem can be fixed by applying classes to the body tag open the index, the HTML file in 6 00:00:21,390 --> 00:00:22,680 these source directory. 7 00:00:25,240 --> 00:00:32,200 The goal is to change the text color for the entire page, if we want to apply global changes to our 8 00:00:32,200 --> 00:00:35,320 document, we should apply them to the body tag. 9 00:00:35,680 --> 00:00:38,170 We have two options at our disposal. 10 00:00:38,410 --> 00:00:43,210 We could select the body tag, add be color property and set the color. 11 00:00:43,540 --> 00:00:50,440 Alternatively, we could choose a color from tailwind head on over to the official tailwind site. 12 00:00:53,070 --> 00:00:58,170 Unlike other frameworks, we can search for classes by the properties they modify. 13 00:00:58,590 --> 00:01:03,750 Since we're trying to change the text color, let's search for the text color property. 14 00:01:06,380 --> 00:01:11,840 Will be taken to a page with a list of classes for changing the text color of an element. 15 00:01:12,290 --> 00:01:19,070 This table will tell us the name of the class, the property it affects and the value it uses on the 16 00:01:19,070 --> 00:01:19,880 right side. 17 00:01:20,030 --> 00:01:21,950 We're given a preview of the color. 18 00:01:22,250 --> 00:01:24,860 As you can see, there are dozens of colors. 19 00:01:25,100 --> 00:01:28,890 Personally, I like the text gray to Hunter class. 20 00:01:28,970 --> 00:01:29,990 Let's copy it. 21 00:01:32,490 --> 00:01:38,520 Back in the ED on the body tag, we're going to add the text grade to high class. 22 00:01:41,120 --> 00:01:45,470 It's perfectly acceptable to modify the index, a CMLL file. 23 00:01:45,650 --> 00:01:52,400 In fact, the tail wind configuration file will search through the contents of this file for tailwind 24 00:01:52,400 --> 00:01:57,410 classes, we're allowed to use tailwind classes outside of components. 25 00:01:57,680 --> 00:01:59,960 Let's refresh the page in the browser. 26 00:02:02,480 --> 00:02:04,550 The text color has changed. 27 00:02:04,820 --> 00:02:07,070 Tailwind is pretty simple to use. 28 00:02:07,340 --> 00:02:10,110 We search for the property we want to change. 29 00:02:10,130 --> 00:02:13,370 Choose a class and apply it to our HTML. 30 00:02:13,670 --> 00:02:15,500 No need to write thesis. 31 00:02:15,800 --> 00:02:20,780 If you use tailwind long enough, you'll quickly become familiar with the classes. 32 00:02:21,050 --> 00:02:23,810 Let's move on to modifying the font family. 33 00:02:24,350 --> 00:02:27,200 I want to change the font family of the template. 34 00:02:27,500 --> 00:02:30,500 Let's on over to the tailwind documentation. 35 00:02:30,860 --> 00:02:34,790 This time we're going to search for the font family property. 36 00:02:37,400 --> 00:02:42,570 Tailwind will provide us with three classes for changing the font family of the element. 37 00:02:42,950 --> 00:02:47,330 The name of the font family we are going to apply is called Roboto. 38 00:02:47,720 --> 00:02:54,320 If we look at these font sans property, we'll find Roboto Font family listed as a value. 39 00:02:56,970 --> 00:03:01,530 It's possible a font family is not listed under tailwinds classes. 40 00:03:01,710 --> 00:03:07,950 If that's the case, you can modify tailwinds to include your font family on the sidebar. 41 00:03:08,040 --> 00:03:09,870 Click on the customizing link. 42 00:03:10,290 --> 00:03:16,860 Tailwind will provide instructions for how to include a value not listed in its default configuration, 43 00:03:17,310 --> 00:03:19,170 according to the documentation. 44 00:03:19,470 --> 00:03:22,780 We need to modify the tail wind configuration file. 45 00:03:22,800 --> 00:03:24,990 If we want to add a new font family. 46 00:03:25,260 --> 00:03:29,070 Luckily for us, we won't need to modify the configuration. 47 00:03:29,340 --> 00:03:31,290 Let's go back to our editors. 48 00:03:33,660 --> 00:03:37,200 On the body tag and the font sans class. 49 00:03:39,710 --> 00:03:43,850 This class will apply the Roboto font family to our documents. 50 00:03:44,090 --> 00:03:47,360 However, it will not load the font family itself. 51 00:03:47,690 --> 00:03:50,510 We still need to handle that step ourselves. 52 00:03:50,790 --> 00:03:53,840 We'll talk about loading assets in the next lecture. 53 00:03:54,110 --> 00:03:56,000 For now, we'll leave it at this. 54 00:03:56,570 --> 00:03:58,100 I have a challenge for you. 55 00:03:58,400 --> 00:04:02,480 Back in the browser, the bottom of the page has no spacing. 56 00:04:03,020 --> 00:04:06,800 The list of videos sits tightly on the edge of the page. 57 00:04:07,070 --> 00:04:10,250 We should give them room to breathe by applying padding. 58 00:04:10,550 --> 00:04:11,690 Here's the challenge. 59 00:04:11,960 --> 00:04:17,550 Search for a class to add padding to the bottom of the document after you find the class. 60 00:04:17,690 --> 00:04:19,490 Apply it to the body tag. 61 00:04:19,850 --> 00:04:22,940 The padding space should be to RAM. 62 00:04:23,420 --> 00:04:25,370 Good luck and pause the video. 63 00:04:27,760 --> 00:04:28,570 Welcome back. 64 00:04:28,840 --> 00:04:31,750 If you're able to solve this challenge, that's great. 65 00:04:32,050 --> 00:04:33,850 If not, that's fine too. 66 00:04:34,090 --> 00:04:36,460 We'll tackle it together at the moment. 67 00:04:36,610 --> 00:04:40,390 I'm on the documentation page for adding padding to an element. 68 00:04:40,750 --> 00:04:43,030 There are hundreds of padding classes. 69 00:04:43,330 --> 00:04:49,300 We can add padding to all sides of an element, or we can add padding to an axis. 70 00:04:49,570 --> 00:04:52,720 Lastly, padding can be applied to one side. 71 00:04:53,320 --> 00:04:56,860 The class we're looking to apply is called PB eight. 72 00:04:57,310 --> 00:05:00,430 This class will add padding to the bottom of an element. 73 00:05:00,700 --> 00:05:02,320 The value is two RAM. 74 00:05:02,560 --> 00:05:03,610 Let's copy it. 75 00:05:06,100 --> 00:05:09,460 Next, we'll add it to the body tag and our editor. 76 00:05:11,960 --> 00:05:12,380 Great. 77 00:05:12,560 --> 00:05:13,340 We're finished. 78 00:05:13,550 --> 00:05:18,890 We've only taken care of the sea, assess our template, we'll need images and fonts. 79 00:05:19,220 --> 00:05:24,320 In the next lecture, we're going to start loading the other assets for our templates.