1 00:00:01,350 --> 00:00:03,600 ‫In this video, we're gonna learn how 2 00:00:03,600 --> 00:00:08,600 ‫we can reuse some styles using Tailwind's Apply directive. 3 00:00:10,170 --> 00:00:15,170 ‫So basically using Apply, we can create an old school class 4 00:00:15,420 --> 00:00:19,230 ‫by composing many Tailwind classes together. 5 00:00:19,230 --> 00:00:22,320 ‫So let me show you what I mean by that. 6 00:00:22,320 --> 00:00:26,220 ‫So let's come here to our index.css file. 7 00:00:26,220 --> 00:00:29,190 ‫And so here we have all this stuff that we actually 8 00:00:29,190 --> 00:00:33,870 ‫no longer need, but this loader we will actually need. 9 00:00:33,870 --> 00:00:35,793 ‫So we will keep this one here. 10 00:00:36,840 --> 00:00:40,440 ‫So here again, we already have these base components 11 00:00:40,440 --> 00:00:44,700 ‫and utilities, which is not really important what they do. 12 00:00:44,700 --> 00:00:48,390 ‫But now let's create a new so-called layer, 13 00:00:48,390 --> 00:00:50,463 ‫which is called components. 14 00:00:53,370 --> 00:00:55,890 ‫So in Tailwind we can create a few 15 00:00:55,890 --> 00:00:58,470 ‫of these different so-called layers 16 00:00:58,470 --> 00:01:00,630 ‫and if you want to learn more about that, 17 00:01:00,630 --> 00:01:03,900 ‫then as always, you can check out the documentation 18 00:01:03,900 --> 00:01:07,770 ‫'cause in practical terms, that's not really important. 19 00:01:07,770 --> 00:01:10,830 ‫What matters is that in here we can now create 20 00:01:10,830 --> 00:01:15,830 ‫some new classes and so let's now create the input class. 21 00:01:17,400 --> 00:01:19,530 ‫So just like this, 22 00:01:19,530 --> 00:01:23,820 ‫and now what I want to do is to copy all of this. 23 00:01:23,820 --> 00:01:28,500 ‫So all of these different Tailwind classes, I will cut them 24 00:01:28,500 --> 00:01:33,500 ‫and then here we can write, apply, past all of that here, 25 00:01:34,860 --> 00:01:36,060 ‫give it a save 26 00:01:36,060 --> 00:01:39,570 ‫and now this input class is basically composed 27 00:01:39,570 --> 00:01:42,480 ‫of all these Tailwind classes 28 00:01:42,480 --> 00:01:47,480 ‫and so I can now replace this here simply with input. 29 00:01:49,920 --> 00:01:51,660 ‫So when I give it a save, 30 00:01:51,660 --> 00:01:55,650 ‫then it still looks exactly the same as before. 31 00:01:55,650 --> 00:01:57,663 ‫And so let's do the same here. 32 00:01:58,830 --> 00:02:03,830 ‫So class name of input, and also right here. 33 00:02:07,830 --> 00:02:11,040 ‫So input and beautiful. 34 00:02:11,040 --> 00:02:13,020 ‫So we have the same styling here now 35 00:02:13,020 --> 00:02:15,693 ‫in all these three input fields. 36 00:02:16,770 --> 00:02:21,480 ‫So again, simply by composing all these Tailwind classes 37 00:02:21,480 --> 00:02:26,130 ‫together into this one new input class. 38 00:02:26,130 --> 00:02:30,540 ‫So this looks really nice and helpful, right? 39 00:02:30,540 --> 00:02:33,240 ‫But that doesn't mean that we should start using 40 00:02:33,240 --> 00:02:35,730 ‫this technique all over the place now 41 00:02:35,730 --> 00:02:38,640 ‫because basically if we started to doing this 42 00:02:38,640 --> 00:02:40,230 ‫for all our elements, 43 00:02:40,230 --> 00:02:43,920 ‫then we would simply go back to writing CSS 44 00:02:43,920 --> 00:02:45,780 ‫in the old school way. 45 00:02:45,780 --> 00:02:49,380 ‫So being back to writing classes and then applying 46 00:02:49,380 --> 00:02:52,530 ‫those classes, so that's what we did before 47 00:02:52,530 --> 00:02:54,900 ‫and so then there would be no point 48 00:02:54,900 --> 00:02:57,900 ‫in using Tailwind in the first place. 49 00:02:57,900 --> 00:02:59,760 ‫So this should really be treated 50 00:02:59,760 --> 00:03:03,690 ‫as an exception here when there are so many classes 51 00:03:03,690 --> 00:03:07,350 ‫that we are using all at the same time, like this year 52 00:03:07,350 --> 00:03:10,830 ‫and when we do not want to create a new component 53 00:03:10,830 --> 00:03:14,640 ‫because the actual better solution would be to reuse 54 00:03:14,640 --> 00:03:17,880 ‫all of this by creating a React component. 55 00:03:17,880 --> 00:03:20,640 ‫So for example, creating an input component 56 00:03:20,640 --> 00:03:22,800 ‫which we could then reuse here 57 00:03:22,800 --> 00:03:25,680 ‫in all these different places, which is actually 58 00:03:25,680 --> 00:03:29,943 ‫what we're going to do in the next video for our buttons. 59 00:03:30,780 --> 00:03:35,310 ‫So again, keep in mind that this way of creating new classes 60 00:03:35,310 --> 00:03:39,060 ‫by composing many other classes together with Apply 61 00:03:39,060 --> 00:03:42,330 ‫should really be the exception and not the rule 62 00:03:42,330 --> 00:03:45,120 ‫because with this, we are throwing out of the window 63 00:03:45,120 --> 00:03:48,690 ‫all of the advantages that Tailwind actually gives us. 64 00:03:48,690 --> 00:03:50,730 ‫Well, maybe not all of them, 65 00:03:50,730 --> 00:03:53,430 ‫but surely many of the advantages. 66 00:03:53,430 --> 00:03:55,920 ‫But of course, I still wanted you to know 67 00:03:55,920 --> 00:03:58,470 ‫about this technique because it is still 68 00:03:58,470 --> 00:04:01,200 ‫an important technique that you might see used 69 00:04:01,200 --> 00:04:04,260 ‫in Tailwind in some situations. 70 00:04:04,260 --> 00:04:06,150 ‫But now in the next lecture, 71 00:04:06,150 --> 00:04:09,840 ‫we will actually reuse some other styles. 72 00:04:09,840 --> 00:04:14,840 ‫So in particular this button here. 73 00:04:15,840 --> 00:04:20,100 ‫So all of this year we will try to reuse this 74 00:04:20,100 --> 00:04:24,300 ‫using React components which is indeed the better way 75 00:04:24,300 --> 00:04:25,743 ‫of reusing styles.