1 00:00:00,420 --> 00:00:03,360 In this lecture, we're going to talk about tailwind. 2 00:00:03,600 --> 00:00:05,130 It's the new kid on the block. 3 00:00:05,370 --> 00:00:09,570 In the past year, tailwinds user base has grown exponentially. 4 00:00:09,840 --> 00:00:11,380 There's a good reason for it. 5 00:00:11,730 --> 00:00:15,630 Tailwind makes developing sites so much easier and faster. 6 00:00:15,840 --> 00:00:17,370 So what is tailwind? 7 00:00:17,610 --> 00:00:19,890 Tailwind is a success framework. 8 00:00:20,100 --> 00:00:23,630 It's similar to other frameworks like Bootstrap and Bulma. 9 00:00:23,910 --> 00:00:27,930 It stands out from the crowd because of the approach it takes with success. 10 00:00:28,410 --> 00:00:31,740 Let's talk about how bootstrap approaches success. 11 00:00:32,070 --> 00:00:35,550 Bootstrap comes with classes for building UI elements. 12 00:00:35,790 --> 00:00:39,570 For example, let's say we wanted to use the card components. 13 00:00:39,900 --> 00:00:44,460 This code snippet shows how a card component can be created with bootstrap. 14 00:00:44,730 --> 00:00:48,540 We need to create some div tags and slap some classes on them. 15 00:00:48,750 --> 00:00:49,950 Pretty simple, right? 16 00:00:50,460 --> 00:00:54,450 The biggest criticism of bootstrap is how similar a lot of sites look. 17 00:00:54,720 --> 00:00:59,670 It's because Bootstrap takes care of defining a predefined set of components. 18 00:01:00,030 --> 00:01:02,640 These components are ready to go out of the box. 19 00:01:02,880 --> 00:01:05,250 Customizing them is completely optional. 20 00:01:05,730 --> 00:01:10,530 In some cases, you may want to change the appearance of some bootstrap element. 21 00:01:10,830 --> 00:01:14,730 For example, let's say we want the color of the title to be red. 22 00:01:15,030 --> 00:01:19,350 We can select the card title element to apply the changes. 23 00:01:19,650 --> 00:01:23,910 This works, but it's going to affect other card elements with titles. 24 00:01:24,180 --> 00:01:29,640 One solution to get around this is by using a better specify, such as assigning an ID. 25 00:01:30,390 --> 00:01:33,030 It works, but it doesn't scale very well. 26 00:01:33,300 --> 00:01:38,250 This approach forces us to constantly switch between documents and style sheets. 27 00:01:38,580 --> 00:01:41,550 You might also have to rewrite the same success. 28 00:01:41,850 --> 00:01:46,020 The more UI elements we have, the more CIUSSS will have to write. 29 00:01:46,350 --> 00:01:50,100 Another challenge is having to memorize what every class does. 30 00:01:50,400 --> 00:01:53,520 The classes and bootstrap describe the UI element. 31 00:01:53,790 --> 00:01:58,290 They don't describe what properties are applied to the elements tailwind. 32 00:01:58,290 --> 00:02:02,610 Resolve this issue by focusing on a different way to write templates. 33 00:02:03,180 --> 00:02:06,090 Tailwind does not focus on UI elements. 34 00:02:06,300 --> 00:02:11,220 If you were to browse the documentation, you won't encounter many UI elements. 35 00:02:11,700 --> 00:02:15,420 Instead, Tailwind focuses on utility classes. 36 00:02:15,990 --> 00:02:17,730 What does that exactly mean? 37 00:02:18,000 --> 00:02:20,640 Tailwind will define hundreds of classes. 38 00:02:20,820 --> 00:02:23,220 Each class will modify one property. 39 00:02:23,700 --> 00:02:26,550 For example, there's a class called M4. 40 00:02:26,820 --> 00:02:31,080 The M4 class will set the margins of an element to one RAM. 41 00:02:31,470 --> 00:02:34,170 There aren't any other properties under this class. 42 00:02:34,440 --> 00:02:39,750 On the other hand, a bootstrap class can modify multiple properties of an element. 43 00:02:40,290 --> 00:02:43,560 For this reason, Tailwind has a larger learning curve. 44 00:02:43,770 --> 00:02:47,610 It's a framework that demands solid knowledge of success. 45 00:02:47,940 --> 00:02:51,330 You won't get far if you don't know much about success. 46 00:02:51,600 --> 00:02:54,420 Luckily, CIUSSS is a simple language. 47 00:02:54,690 --> 00:02:57,630 Tailwind looks difficult to read, but it's not. 48 00:02:57,660 --> 00:03:03,990 Once you understand what each class does by looking at the classes, you will immediately know what 49 00:03:03,990 --> 00:03:06,540 properties are being applied to the elements. 50 00:03:06,810 --> 00:03:12,090 This saves you time from having to switch over to the stylesheet to understand the class. 51 00:03:13,350 --> 00:03:19,560 In the resource section of this lecture, I provide a link to the official tailwind sites on the home 52 00:03:19,560 --> 00:03:26,760 page will be shown an example of the Type UI elements we can create with this framework on the right 53 00:03:26,940 --> 00:03:30,750 will find what our H.M. will look like with tailwinds. 54 00:03:31,290 --> 00:03:35,520 Unlike bootstrap, multiple classes are being applied to the elements. 55 00:03:35,790 --> 00:03:38,160 Each class will change one property. 56 00:03:38,490 --> 00:03:43,980 From this live example, we can see how each class affects the element as they're added in. 57 00:03:44,340 --> 00:03:48,030 This leads us to the question How do we know which class to use? 58 00:03:48,240 --> 00:03:52,440 Luckily, tailwind has some of the best documentation around. 59 00:03:52,710 --> 00:03:56,080 Each class is well documented at the top. 60 00:03:56,100 --> 00:03:58,080 We can search for any class. 61 00:03:58,290 --> 00:04:01,740 Let's search for the M4 class we looked at earlier. 62 00:04:04,280 --> 00:04:09,080 According to the documentation, this class will change the margins of an element. 63 00:04:09,380 --> 00:04:11,540 It'll even tell us by how much. 64 00:04:11,780 --> 00:04:13,970 We never have to look at the success. 65 00:04:14,300 --> 00:04:19,130 The documentation will always tell us what property and value a class will have. 66 00:04:19,490 --> 00:04:21,950 We're not limited to a single class, either. 67 00:04:22,310 --> 00:04:25,940 There are multiple classes for changing the margins of an element. 68 00:04:26,240 --> 00:04:29,330 We can add margins to one side or access. 69 00:04:29,810 --> 00:04:31,740 Tailwind seems great so far. 70 00:04:31,760 --> 00:04:32,840 So what's the catch? 71 00:04:33,140 --> 00:04:40,130 Tailwind is much larger than most libraries on a compressed tailwind is over 300 kilobytes large. 72 00:04:40,460 --> 00:04:45,740 Luckily, tailwind works hand in hand with a library called Purge Success. 73 00:04:46,040 --> 00:04:51,590 In the resource section of this lecture, I provide a link to the Purge CIUSSS library. 74 00:04:52,130 --> 00:04:56,630 Purge KSAZ will scan your HTML for classes that are being used. 75 00:04:56,870 --> 00:05:00,740 It will then remove unused CIUSSS from your style sheets. 76 00:05:01,090 --> 00:05:04,220 Purge KSAZ is commonly used with tailwind. 77 00:05:04,490 --> 00:05:08,840 On average, most tailwind sites use less than 10 kilobytes. 78 00:05:09,110 --> 00:05:13,550 This process is automatically done for us by installing the tail wind module. 79 00:05:13,820 --> 00:05:17,780 As you can see, tailwind is rising in popularity for a reason. 80 00:05:18,050 --> 00:05:23,150 If you're confused by any class we use, you can always consult the documentation. 81 00:05:23,570 --> 00:05:28,430 It'll tell you right away what property gets applied to an element for this course. 82 00:05:28,640 --> 00:05:32,360 We're going to be using tailwind for our Gaming Highlights app. 83 00:05:32,690 --> 00:05:35,840 In the next lecture, we're going to install tailwind.