1 00:00:00,240 --> 00:00:06,090 OK, so now we'll be looking at how to use tailwind success and how to in the first place, how to install 2 00:00:06,090 --> 00:00:09,990 it and how to implement it inside your product. 3 00:00:10,380 --> 00:00:15,480 Before that, we need to go to the browser and go to the official website of the CSIS. 4 00:00:15,930 --> 00:00:22,240 And it's just like the Jesus framework, like bootstrap or something. 5 00:00:22,890 --> 00:00:29,360 So you can just use it for using the tiles and on to let us go to the official website. 6 00:00:29,370 --> 00:00:30,720 Often this. 7 00:00:35,800 --> 00:00:36,360 This is it. 8 00:00:36,960 --> 00:00:39,390 So when you come to the website. 9 00:00:40,790 --> 00:00:42,430 It will show. 10 00:00:44,250 --> 00:00:48,470 The website rapidly built modern websites without ever leaving you. 11 00:00:49,750 --> 00:00:50,260 Does the. 12 00:00:51,180 --> 00:00:54,030 Immigrants, which we are going to use today in our project. 13 00:00:55,030 --> 00:01:01,450 This is just like mousetrap part in this, you need to write even less gold and. 14 00:01:02,540 --> 00:01:02,840 So. 15 00:01:04,140 --> 00:01:10,440 What they need to do is you need to install tolerance to on our system, so for that, you need to run 16 00:01:10,440 --> 00:01:14,040 this particular command, which is the npm install element. 17 00:01:14,190 --> 00:01:14,410 Yes. 18 00:01:14,720 --> 00:01:20,820 This copy this command and copied to your clipboard and then you can just go to your. 19 00:01:23,000 --> 00:01:28,760 Ideally, you can just stop the server and base your mind. 20 00:01:30,500 --> 00:01:37,730 This will be combined which and this will be the command which installed Delancy to on your computer 21 00:01:38,330 --> 00:01:45,680 just tapped this command and funded ventilation system will be installed a computer. 22 00:01:46,310 --> 00:01:52,280 So next, how to use it for that all to you need to come to this website only, which is the Children 23 00:01:52,430 --> 00:01:53,650 US website. 24 00:01:53,670 --> 00:01:55,730 So now you can go to the document. 25 00:01:57,440 --> 00:02:03,860 But from here, you can learn how to use it out to implement it, or even if you know how to use it, 26 00:02:03,860 --> 00:02:10,610 you will see different, different features which you can implement to your website using this particular 27 00:02:10,620 --> 00:02:13,490 purpose using this particular framework scissors framework. 28 00:02:14,090 --> 00:02:17,120 OK, so this is it. 29 00:02:17,120 --> 00:02:23,270 And now let's roll another package that is the. 30 00:02:26,510 --> 00:02:31,810 And what cackle will do like it will be won't do it for running your app, it will. 31 00:02:31,820 --> 00:02:35,150 Once you let me show you what is Crackle, so. 32 00:02:37,490 --> 00:02:38,480 Echo goal. 33 00:02:41,160 --> 00:02:46,890 So when you go to the website, go and be armed or just. 34 00:02:47,950 --> 00:02:51,130 Well, basically, it is dead here, also like. 35 00:02:52,450 --> 00:02:52,900 Building. 36 00:02:54,410 --> 00:02:56,270 Born on the browser. 37 00:03:01,300 --> 00:03:02,200 That's a good. 38 00:03:06,280 --> 00:03:13,540 Well, from early will start to basically you can run this command, all sorts of what it will do is 39 00:03:13,900 --> 00:03:20,470 will install all of the latest packages which are required along with detailed one courses. 40 00:03:20,950 --> 00:03:25,120 Or you can also run this command is copy this and then you can do that. 41 00:03:25,390 --> 00:03:28,420 Next, you will be able to. 42 00:03:29,450 --> 00:03:34,970 Get Graco file that we will do part of what here. 43 00:03:36,610 --> 00:03:38,110 We will be doing is. 44 00:03:39,890 --> 00:03:42,140 Next, we will install Crackle. 45 00:03:42,800 --> 00:03:46,120 So this is the crackle and pop. 46 00:03:46,290 --> 00:03:49,720 So what is Crackle basically create React app configuration, all right. 47 00:03:49,730 --> 00:03:53,870 Is an easy and comprehensible confusion layer over the creator, the act up. 48 00:03:54,170 --> 00:03:57,380 Now basically what we do is we write and beam start. 49 00:03:57,740 --> 00:04:01,910 So inside that if you go to the package, don't use and fail. 50 00:04:01,920 --> 00:04:07,970 So there is a script running after when when you write the npm start that particular script running 51 00:04:08,450 --> 00:04:14,870 this will override that and what it'll do, it will make a little bit of faster and it will be a little 52 00:04:15,770 --> 00:04:16,280 efficient. 53 00:04:16,490 --> 00:04:18,860 So let me just copy this particular command from here. 54 00:04:18,860 --> 00:04:29,360 And then we go to this thing, just the side and not what we can be started here and now we can install 55 00:04:29,360 --> 00:04:30,710 or crackle. 56 00:04:31,010 --> 00:04:37,520 So now what we do is after installing Crackle, you need to configure your package storage use and according 57 00:04:37,550 --> 00:04:41,270 to you, how you will do it or. 58 00:04:45,040 --> 00:04:47,350 So, you know, you can it. 59 00:04:51,350 --> 00:04:52,640 So this is what you need to do. 60 00:04:52,670 --> 00:05:00,030 You need to do the very, very what is minus do we have to remove that particular line and whatever 61 00:05:00,140 --> 00:05:00,470 that is? 62 00:05:00,470 --> 00:05:04,700 Plus you need to add that fight, you need to end that particular line. 63 00:05:04,970 --> 00:05:11,390 OK, so these two, these three lines you need to delete, and instead of those three lines, you need 64 00:05:11,390 --> 00:05:19,490 to basically copy and paste these green lines, OK, so that we will do we will copy this one by one. 65 00:05:20,910 --> 00:05:26,910 And now we will be seated and I will go to the package or Jason, and instead of that, we will paste 66 00:05:27,300 --> 00:05:30,040 all of that, which we just saw now. 67 00:05:30,210 --> 00:05:32,910 It will start, then we do this. 68 00:05:33,460 --> 00:05:41,460 So when we do npm start and PM starts with this particular connect start will run long run and you will 69 00:05:41,460 --> 00:05:45,120 be able to start off your server and do the browser. 70 00:05:45,390 --> 00:05:47,780 So this is what it will do now. 71 00:05:47,790 --> 00:05:53,550 We have already installed the tailwind and sees on our project. 72 00:05:53,970 --> 00:05:56,940 Next, we will have to make a Graco file. 73 00:05:57,570 --> 00:06:02,220 So then insert of that file, just copy and just paste this thing. 74 00:06:02,220 --> 00:06:09,030 So inside the project, basically outside of everything you need to make a file, which is the crackle 75 00:06:09,240 --> 00:06:10,570 dot config daughter. 76 00:06:10,600 --> 00:06:11,880 So inside the. 77 00:06:13,500 --> 00:06:17,490 Not thought inside this entire project we need to make of all that is the. 78 00:06:18,510 --> 00:06:19,490 But our court. 79 00:06:21,250 --> 00:06:21,820 In fact. 80 00:06:22,660 --> 00:06:30,590 Tortillas and tortillas and inserted this funeral took place this particular chord and will tell when 81 00:06:30,610 --> 00:06:30,930 it is. 82 00:06:31,420 --> 00:06:35,390 And we will see where it crackle start config thought. 83 00:06:35,680 --> 00:06:37,900 Yes, but don't make any typos. 84 00:06:38,140 --> 00:06:39,100 The really important. 85 00:06:39,460 --> 00:06:43,720 And then we will check odd project delving into npm start. 86 00:06:45,330 --> 00:06:52,980 And it should run replication because this torture isn't so you can see that it could start being written 87 00:06:52,980 --> 00:06:56,400 instead of and beam starts so it could connect or start. 88 00:06:56,500 --> 00:07:03,810 So that is the first sign that we have successfully installed Crackle or so you can see our servers 89 00:07:03,810 --> 00:07:09,510 running using Crackle, and that is on the same for basically an uncle here. 90 00:07:10,610 --> 00:07:11,140 I. 91 00:07:12,490 --> 00:07:13,660 Why this is. 92 00:07:14,850 --> 00:07:19,290 And it is running and seems like people believe this one. 93 00:07:19,600 --> 00:07:21,300 But there is no problem with this. 94 00:07:21,840 --> 00:07:27,350 And now has successfully made art installations of the tailwind and the crackle. 95 00:07:27,750 --> 00:07:33,450 Now we can go ahead and style our application using detailer and CIUSSS, and we can start building 96 00:07:33,450 --> 00:07:34,920 our application. 97 00:07:35,390 --> 00:07:45,300 But let us go to the video and let us start creating things which we will be doing for the very first 98 00:07:45,300 --> 00:07:53,730 thing which will do is we will see how to use tailwind in our project, like how to when we are creating 99 00:07:53,730 --> 00:07:54,960 nav bar or something like that. 100 00:07:54,960 --> 00:08:02,400 So now we will go to the Tilman website and here you will see what we need to make. 101 00:08:03,080 --> 00:08:11,190 So there are a bunch of things that are that are really, really a bunch of things for like we are building 102 00:08:11,190 --> 00:08:12,180 for real ideas. 103 00:08:12,180 --> 00:08:17,190 So this is the like thing which we are going to do so. 104 00:08:18,920 --> 00:08:20,280 We already installed Crackle. 105 00:08:20,720 --> 00:08:24,050 We already added these things to our package Georgeson file. 106 00:08:24,320 --> 00:08:30,110 We already created the crackle config and added, This feels like word of I was telling that is already 107 00:08:30,110 --> 00:08:30,440 here. 108 00:08:30,770 --> 00:08:31,540 The same thing. 109 00:08:31,580 --> 00:08:33,530 I was also telling the same thing. 110 00:08:33,980 --> 00:08:35,240 So this is it. 111 00:08:35,720 --> 00:08:42,760 The next now we will create our never bought for the very first thing, which is that in Napa. 112 00:08:43,460 --> 00:08:47,500 So let us see from there if you can find in a bar. 113 00:08:48,760 --> 00:08:49,150 So. 114 00:08:50,340 --> 00:08:50,760 At this. 115 00:08:51,910 --> 00:08:53,820 We will create an air force. 116 00:08:56,940 --> 00:08:59,460 Odd at, but what we call. 117 00:09:01,820 --> 00:09:05,720 The two will be creating Arnav Bar in the next rodeo.