1 00:00:01,080 --> 00:00:03,810 ‫So as I mentioned in the previous video, 2 00:00:03,810 --> 00:00:07,320 ‫we need to set up Tailwind on each new project 3 00:00:07,320 --> 00:00:09,420 ‫that we want to use it on. 4 00:00:09,420 --> 00:00:13,473 ‫And so let's now do that for our current project. 5 00:00:14,790 --> 00:00:18,270 ‫Now, instead of me just showing you all the steps 6 00:00:18,270 --> 00:00:19,950 ‫to set up Tailwind 7 00:00:19,950 --> 00:00:23,970 ‫let's actually follow the official documentation. 8 00:00:23,970 --> 00:00:27,900 ‫So let's open up a new browser tab 9 00:00:27,900 --> 00:00:30,093 ‫and then we just Google for Tailwind, 10 00:00:30,960 --> 00:00:34,923 ‫and then this will take us to their documentation page. 11 00:00:36,540 --> 00:00:39,480 ‫So here we then move to the documentation 12 00:00:39,480 --> 00:00:43,650 ‫and actually immediately we are on the installation page. 13 00:00:43,650 --> 00:00:48,450 ‫But if in the meantime this documentation site has changed, 14 00:00:48,450 --> 00:00:51,210 ‫then just make sure to come here to the menu 15 00:00:51,210 --> 00:00:53,883 ‫and then select installation from there. 16 00:00:55,140 --> 00:00:57,690 ‫Now, right now it's also important 17 00:00:57,690 --> 00:01:01,230 ‫that you select version three right here. 18 00:01:01,230 --> 00:01:03,510 ‫So whatever is the latest version 19 00:01:03,510 --> 00:01:05,700 ‫of the major version three 20 00:01:05,700 --> 00:01:08,280 ‫because that's the one that we're gonna be using 21 00:01:08,280 --> 00:01:09,393 ‫in this course. 22 00:01:11,070 --> 00:01:15,510 ‫Okay, so here we have different options for installation. 23 00:01:15,510 --> 00:01:19,530 ‫Let's select this one here that says framework guides. 24 00:01:19,530 --> 00:01:24,530 ‫And then what we want to do is to set up Tailwind with Vite. 25 00:01:24,840 --> 00:01:28,740 ‫And again, if in the meantime the website here has changed 26 00:01:28,740 --> 00:01:33,740 ‫then just Google for Tailwind install Vite. 27 00:01:35,280 --> 00:01:39,483 ‫So that will then probably take you to the exact same page. 28 00:01:40,890 --> 00:01:43,350 ‫All right, and so now that you have your list 29 00:01:43,350 --> 00:01:46,560 ‫of instructions, let's just follow it. 30 00:01:46,560 --> 00:01:49,440 ‫So the first step, of course we already did. 31 00:01:49,440 --> 00:01:51,720 ‫So we already have our project. 32 00:01:51,720 --> 00:01:56,070 ‫So next step we need to install Tailwind like this. 33 00:01:56,070 --> 00:02:01,070 ‫So let's just copy this and then opening up a new terminal. 34 00:02:02,220 --> 00:02:04,020 ‫But here I want you to make sure 35 00:02:04,020 --> 00:02:07,920 ‫that you're using Tailwind at version three 36 00:02:07,920 --> 00:02:10,560 ‫because otherwise something might have changed 37 00:02:10,560 --> 00:02:11,700 ‫in the meantime. 38 00:02:11,700 --> 00:02:14,340 ‫And then your video or the code 39 00:02:14,340 --> 00:02:16,140 ‫that you're writing will not work 40 00:02:16,140 --> 00:02:19,980 ‫in the exact same way as what I'm doing in the video. 41 00:02:19,980 --> 00:02:23,163 ‫So let's now give it some time here while it installs. 42 00:02:24,180 --> 00:02:28,563 ‫So let's head back here and get this next step. 43 00:02:29,610 --> 00:02:33,240 ‫So let's do this one, which will then create the Tailwind 44 00:02:33,240 --> 00:02:35,913 ‫and the post CSS config files. 45 00:02:38,640 --> 00:02:40,440 ‫So that's exactly what happened. 46 00:02:40,440 --> 00:02:43,260 ‫And so now we have these two new files, 47 00:02:43,260 --> 00:02:46,773 ‫so post CSS config and Tailwind config. 48 00:02:48,000 --> 00:02:51,090 ‫So let's see what we have to do next. 49 00:02:51,090 --> 00:02:54,030 ‫And so for this one, let's actually open up 50 00:02:54,030 --> 00:02:56,520 ‫our Tailwind config file. 51 00:02:56,520 --> 00:03:01,520 ‫And so what we need to do is to now copy this array here 52 00:03:01,980 --> 00:03:03,063 ‫to the content. 53 00:03:04,350 --> 00:03:06,930 ‫So here, instead of this empty array, 54 00:03:06,930 --> 00:03:10,530 ‫what we want is this to basically tell Tailwind 55 00:03:10,530 --> 00:03:14,130 ‫where or index HTML file is located 56 00:03:14,130 --> 00:03:18,360 ‫and also where all or JavaScript files are located. 57 00:03:18,360 --> 00:03:21,960 ‫So by default they are inside this source folder 58 00:03:21,960 --> 00:03:25,800 ‫but if for some reason we changed all of this right here 59 00:03:25,800 --> 00:03:28,740 ‫then we would also have to change this config. 60 00:03:28,740 --> 00:03:31,323 ‫But by default, this is how it works. 61 00:03:32,220 --> 00:03:34,410 ‫Now let's see what the error here is 62 00:03:34,410 --> 00:03:38,700 ‫but this is simply ES lint not liking the syntax here 63 00:03:38,700 --> 00:03:40,533 ‫but that's no problem at all. 64 00:03:42,150 --> 00:03:44,640 ‫So the rest here is actually the same. 65 00:03:44,640 --> 00:03:47,250 ‫And so let's keep going. 66 00:03:47,250 --> 00:03:50,520 ‫And so now what we have to do is to actually change 67 00:03:50,520 --> 00:03:54,720 ‫or index CSS file for the first time. 68 00:03:54,720 --> 00:03:57,063 ‫So let's grab all of this here. 69 00:03:58,020 --> 00:04:01,200 ‫So copy this and paste it right 70 00:04:01,200 --> 00:04:05,310 ‫at the very top of index.CSS. 71 00:04:05,310 --> 00:04:10,310 ‫And in fact, we will now get rid of all of these classes 72 00:04:10,380 --> 00:04:11,823 ‫or at least most of them. 73 00:04:13,020 --> 00:04:14,823 ‫Let's just comment this one out. 74 00:04:16,500 --> 00:04:20,070 ‫And then again, let's paste this here at the very top. 75 00:04:20,070 --> 00:04:23,043 ‫And with this, we are actually finished. 76 00:04:24,210 --> 00:04:27,990 ‫So all we need to do now is to start our project 77 00:04:27,990 --> 00:04:32,010 ‫and then we can start using Tailwind in our project. 78 00:04:32,010 --> 00:04:33,190 ‫So let's close this 79 00:04:37,500 --> 00:04:40,590 ‫and let's maybe close the process 80 00:04:40,590 --> 00:04:45,590 ‫that we had already running just to restart our application. 81 00:04:46,770 --> 00:04:48,723 ‫So npm run dev. 82 00:04:53,250 --> 00:04:55,410 ‫So let's wait for it. 83 00:04:55,410 --> 00:04:58,170 ‫And in fact, we can immediately see 84 00:04:58,170 --> 00:05:00,690 ‫that something looks different here. 85 00:05:00,690 --> 00:05:03,960 ‫So Tailwind already applied some base styling 86 00:05:03,960 --> 00:05:05,193 ‫to our application. 87 00:05:06,900 --> 00:05:09,240 ‫So basically it removed all the styling 88 00:05:09,240 --> 00:05:11,070 ‫from all the elements. 89 00:05:11,070 --> 00:05:15,630 ‫And if you want to know exactly what that CSS reset is, 90 00:05:15,630 --> 00:05:19,470 ‫you can come here to the documentation again 91 00:05:19,470 --> 00:05:23,190 ‫and it is right here in this Preflight. 92 00:05:23,190 --> 00:05:26,700 ‫So all the base styles that Tailwind is applying 93 00:05:26,700 --> 00:05:29,043 ‫are described right here. 94 00:05:30,030 --> 00:05:34,860 ‫But anyway, let's now test this out for the very first time. 95 00:05:34,860 --> 00:05:38,910 ‫So just to see if Tailwind is really working. 96 00:05:38,910 --> 00:05:43,500 ‫So let's come here to our homepage and then here 97 00:05:43,500 --> 00:05:45,633 ‫let's style this text a bit. 98 00:05:46,590 --> 00:05:50,520 ‫So we just use the class name prop that we have been using 99 00:05:50,520 --> 00:05:53,310 ‫all along with the difference that now 100 00:05:53,310 --> 00:05:55,500 ‫we will be using Tailwinds classes 101 00:05:55,500 --> 00:05:59,550 ‫instead of our own classes that we previously had 102 00:05:59,550 --> 00:06:02,010 ‫in index.CSS. 103 00:06:02,010 --> 00:06:07,010 ‫So let's say text-xl, so extra large 104 00:06:07,680 --> 00:06:12,680 ‫and let's say text yellow-500 and font-semidbold 105 00:06:17,190 --> 00:06:21,120 ‫give it a save and beautiful. 106 00:06:21,120 --> 00:06:26,070 ‫So you just wrote your very first line of Tailwind CSS 107 00:06:26,070 --> 00:06:30,060 ‫and the result is exactly what we might have expected. 108 00:06:30,060 --> 00:06:34,050 ‫So the text is now extra large, at least in comparison 109 00:06:34,050 --> 00:06:39,050 ‫with the rest here, the text is also yellow and semi bold. 110 00:06:39,360 --> 00:06:43,110 ‫Now of course we will go over the course of the section 111 00:06:43,110 --> 00:06:46,470 ‫into how all of these class names work, but for now 112 00:06:46,470 --> 00:06:49,230 ‫I just want you to type these classes here 113 00:06:49,230 --> 00:06:51,750 ‫just to see their effect. 114 00:06:51,750 --> 00:06:55,770 ‫Now, okay, so we might think that with this we are done 115 00:06:55,770 --> 00:06:59,250 ‫but actually there are two more things that we need to do. 116 00:06:59,250 --> 00:07:01,200 ‫And the first one is to install 117 00:07:01,200 --> 00:07:03,963 ‫the Tailwind VS code extension. 118 00:07:05,430 --> 00:07:08,310 ‫So let's just search for Tailwind here. 119 00:07:08,310 --> 00:07:12,000 ‫And then it is this first one, so the official one 120 00:07:12,000 --> 00:07:14,190 ‫by Tailwind CSS. 121 00:07:14,190 --> 00:07:16,710 ‫So let's install this extension. 122 00:07:16,710 --> 00:07:20,280 ‫And this one of course you will only have to do once 123 00:07:20,280 --> 00:07:22,380 ‫for your VS code. 124 00:07:22,380 --> 00:07:24,300 ‫So the nice thing about this 125 00:07:24,300 --> 00:07:26,430 ‫is that it will now show you exactly 126 00:07:26,430 --> 00:07:29,250 ‫what CSS is being written for you 127 00:07:29,250 --> 00:07:32,220 ‫as you use each of these classes. 128 00:07:32,220 --> 00:07:36,270 ‫So for example, text-xl here corresponds to a font size 129 00:07:36,270 --> 00:07:41,270 ‫of 1.25 rem, which is equivalent to 20 pixels. 130 00:07:41,670 --> 00:07:45,210 ‫And here this text color will give you this 131 00:07:45,210 --> 00:07:50,210 ‫and the semi-bold font will give you a font weight of 600. 132 00:07:50,520 --> 00:07:54,480 ‫So that's really, really helpful, but that's not even all 133 00:07:54,480 --> 00:07:58,500 ‫because we also get now auto completion out of the box. 134 00:07:58,500 --> 00:08:03,500 ‫So if we start writing text-center for example 135 00:08:04,590 --> 00:08:08,340 ‫then here we get this auto completion. 136 00:08:08,340 --> 00:08:10,350 ‫So we just need to select that. 137 00:08:10,350 --> 00:08:13,770 ‫And then you see that our text got centered. 138 00:08:13,770 --> 00:08:16,440 ‫And so with this, maybe you start seeing 139 00:08:16,440 --> 00:08:20,100 ‫that these class names are actually really intuitive 140 00:08:20,100 --> 00:08:21,630 ‫and easy to use. 141 00:08:21,630 --> 00:08:24,840 ‫So in this case, what this class here does 142 00:08:24,840 --> 00:08:27,930 ‫is simply to do text align center, 143 00:08:27,930 --> 00:08:31,413 ‫which I'm sure you are already familiar with as well. 144 00:08:32,700 --> 00:08:35,850 ‫Okay, so this is one of the important things 145 00:08:35,850 --> 00:08:37,440 ‫that we needed to do. 146 00:08:37,440 --> 00:08:40,320 ‫And now finally, we also need to install 147 00:08:40,320 --> 00:08:42,630 ‫a special prettier extension. 148 00:08:42,630 --> 00:08:47,630 ‫So let's search for Tailwind prettier extension 149 00:08:51,330 --> 00:08:53,610 ‫and it should be this GitHub link here 150 00:08:53,610 --> 00:08:57,483 ‫that is in Tailwind labs GitHub repo. 151 00:08:58,470 --> 00:09:00,120 ‫So just click here. 152 00:09:00,120 --> 00:09:04,743 ‫And so then we need to install also this one right here. 153 00:09:06,450 --> 00:09:11,450 ‫So let's copy that open again a new terminal 154 00:09:11,460 --> 00:09:13,500 ‫and then install this plugin. 155 00:09:13,500 --> 00:09:17,670 ‫And so what this will do is to automatically sort the order 156 00:09:17,670 --> 00:09:22,170 ‫of the class names in the way that Tailwind recommends it. 157 00:09:22,170 --> 00:09:24,600 ‫And this is gonna be pretty helpful for you 158 00:09:24,600 --> 00:09:28,260 ‫because then you will always find the same class names 159 00:09:28,260 --> 00:09:31,833 ‫in the same position of this long string here. 160 00:09:33,450 --> 00:09:36,540 ‫Alright, and now this might already work 161 00:09:36,540 --> 00:09:40,560 ‫by default out of the box, but just to make sure 162 00:09:40,560 --> 00:09:44,010 ‫let's also create this prettier config file 163 00:09:44,010 --> 00:09:46,353 ‫and then copy this code in there. 164 00:09:48,600 --> 00:09:50,610 ‫So you see that we are starting 165 00:09:50,610 --> 00:09:54,690 ‫to have a lot of these config files, but well 166 00:09:54,690 --> 00:09:58,870 ‫that's just how it works in modern React development 167 00:10:00,930 --> 00:10:03,993 ‫or actually modern web development in general. 168 00:10:05,070 --> 00:10:10,070 ‫So prettier.config.js, let's paste that here. 169 00:10:12,540 --> 00:10:15,570 ‫And we could even config all kinds 170 00:10:15,570 --> 00:10:17,880 ‫of other stuff about prettier here. 171 00:10:17,880 --> 00:10:19,350 ‫So in case you're not familiar 172 00:10:19,350 --> 00:10:23,070 ‫with this config file, for example, we could also say 173 00:10:23,070 --> 00:10:27,750 ‫that we want single quotes instead of double quotes. 174 00:10:27,750 --> 00:10:32,750 ‫So let's say single quote and set it to true. 175 00:10:34,980 --> 00:10:38,580 ‫And if we then come back here and give it a save 176 00:10:38,580 --> 00:10:41,520 ‫well then we get some problem. 177 00:10:41,520 --> 00:10:45,480 ‫So let's click here on this red prettier 178 00:10:45,480 --> 00:10:47,010 ‫or you could also have come here 179 00:10:47,010 --> 00:10:51,090 ‫to the output and then select prettier from there. 180 00:10:51,090 --> 00:10:52,533 ‫So let's see what is wrong. 181 00:10:54,960 --> 00:10:58,533 ‫So well, this is a lot of stuff to read. 182 00:10:59,520 --> 00:11:04,520 ‫Here it still seems to be correct, but here is the problem. 183 00:11:04,980 --> 00:11:09,937 ‫So rename prettier.config.js to end in CGS. 184 00:11:11,760 --> 00:11:16,760 ‫Okay, so that was a mistake here, but it's also good to see 185 00:11:17,970 --> 00:11:21,210 ‫that this kind of thing happens all the time. 186 00:11:21,210 --> 00:11:24,630 ‫And now as I save this, actually you saw 187 00:11:24,630 --> 00:11:27,780 ‫that these double quotes that we had here got converted 188 00:11:27,780 --> 00:11:28,980 ‫to single quotes. 189 00:11:28,980 --> 00:11:32,010 ‫And so with this, we know that it is working. 190 00:11:32,010 --> 00:11:35,223 ‫And also down here now it says formatting completed. 191 00:11:36,660 --> 00:11:40,050 ‫Okay, so let's head back to our terminal. 192 00:11:40,050 --> 00:11:42,570 ‫And now right here as I save this, 193 00:11:42,570 --> 00:11:47,130 ‫notice how the order of the classes here should change. 194 00:11:47,130 --> 00:11:50,580 ‫And indeed, that's exactly what happened. 195 00:11:50,580 --> 00:11:55,580 ‫Great, so now we have Tailwind correctly set up 196 00:11:55,950 --> 00:11:59,100 ‫and so we are ready to start using it right 197 00:11:59,100 --> 00:12:00,363 ‫in the next video.