‫So as I mentioned in the previous video,
‫we need to set up Tailwind on each new project
‫that we want to use it on.
‫And so let's now do that for our current project.
‫Now, instead of me just showing you all the steps
‫to set up Tailwind
‫let's actually follow the official documentation.
‫So let's open up a new browser tab
‫and then we just Google for Tailwind,
‫and then this will take us to their documentation page.
‫So here we then move to the documentation
‫and actually immediately we are on the installation page.
‫But if in the meantime this documentation site has changed,
‫then just make sure to come here to the menu
‫and then select installation from there.
‫Now, right now it's also important
‫that you select version three right here.
‫So whatever is the latest version
‫of the major version three
‫because that's the one that we're gonna be using
‫in this course.
‫Okay, so here we have different options for installation.
‫Let's select this one here that says framework guides.
‫And then what we want to do is to set up Tailwind with Vite.
‫And again, if in the meantime the website here has changed
‫then just Google for Tailwind install Vite.
‫So that will then probably take you to the exact same page.
‫All right, and so now that you have your list
‫of instructions, let's just follow it.
‫So the first step, of course we already did.
‫So we already have our project.
‫So next step we need to install Tailwind like this.
‫So let's just copy this and then opening up a new terminal.
‫But here I want you to make sure
‫that you're using Tailwind at version three
‫because otherwise something might have changed
‫in the meantime.
‫And then your video or the code
‫that you're writing will not work
‫in the exact same way as what I'm doing in the video.
‫So let's now give it some time here while it installs.
‫So let's head back here and get this next step.
‫So let's do this one, which will then create the Tailwind
‫and the post CSS config files.
‫So that's exactly what happened.
‫And so now we have these two new files,
‫so post CSS config and Tailwind config.
‫So let's see what we have to do next.
‫And so for this one, let's actually open up
‫our Tailwind config file.
‫And so what we need to do is to now copy this array here
‫to the content.
‫So here, instead of this empty array,
‫what we want is this to basically tell Tailwind
‫where or index HTML file is located
‫and also where all or JavaScript files are located.
‫So by default they are inside this source folder
‫but if for some reason we changed all of this right here
‫then we would also have to change this config.
‫But by default, this is how it works.
‫Now let's see what the error here is
‫but this is simply ES lint not liking the syntax here
‫but that's no problem at all.
‫So the rest here is actually the same.
‫And so let's keep going.
‫And so now what we have to do is to actually change
‫or index CSS file for the first time.
‫So let's grab all of this here.
‫So copy this and paste it right
‫at the very top of index.CSS.
‫And in fact, we will now get rid of all of these classes
‫or at least most of them.
‫Let's just comment this one out.
‫And then again, let's paste this here at the very top.
‫And with this, we are actually finished.
‫So all we need to do now is to start our project
‫and then we can start using Tailwind in our project.
‫So let's close this
‫and let's maybe close the process
‫that we had already running just to restart our application.
‫So npm run dev.
‫So let's wait for it.
‫And in fact, we can immediately see
‫that something looks different here.
‫So Tailwind already applied some base styling
‫to our application.
‫So basically it removed all the styling
‫from all the elements.
‫And if you want to know exactly what that CSS reset is,
‫you can come here to the documentation again
‫and it is right here in this Preflight.
‫So all the base styles that Tailwind is applying
‫are described right here.
‫But anyway, let's now test this out for the very first time.
‫So just to see if Tailwind is really working.
‫So let's come here to our homepage and then here
‫let's style this text a bit.
‫So we just use the class name prop that we have been using
‫all along with the difference that now
‫we will be using Tailwinds classes
‫instead of our own classes that we previously had
‫in index.CSS.
‫So let's say text-xl, so extra large
‫and let's say text yellow-500 and font-semidbold
‫give it a save and beautiful.
‫So you just wrote your very first line of Tailwind CSS
‫and the result is exactly what we might have expected.
‫So the text is now extra large, at least in comparison
‫with the rest here, the text is also yellow and semi bold.
‫Now of course we will go over the course of the section
‫into how all of these class names work, but for now
‫I just want you to type these classes here
‫just to see their effect.
‫Now, okay, so we might think that with this we are done
‫but actually there are two more things that we need to do.
‫And the first one is to install
‫the Tailwind VS code extension.
‫So let's just search for Tailwind here.
‫And then it is this first one, so the official one
‫by Tailwind CSS.
‫So let's install this extension.
‫And this one of course you will only have to do once
‫for your VS code.
‫So the nice thing about this
‫is that it will now show you exactly
‫what CSS is being written for you
‫as you use each of these classes.
‫So for example, text-xl here corresponds to a font size
‫of 1.25 rem, which is equivalent to 20 pixels.
‫And here this text color will give you this
‫and the semi-bold font will give you a font weight of 600.
‫So that's really, really helpful, but that's not even all
‫because we also get now auto completion out of the box.
‫So if we start writing text-center for example
‫then here we get this auto completion.
‫So we just need to select that.
‫And then you see that our text got centered.
‫And so with this, maybe you start seeing
‫that these class names are actually really intuitive
‫and easy to use.
‫So in this case, what this class here does
‫is simply to do text align center,
‫which I'm sure you are already familiar with as well.
‫Okay, so this is one of the important things
‫that we needed to do.
‫And now finally, we also need to install
‫a special prettier extension.
‫So let's search for Tailwind prettier extension
‫and it should be this GitHub link here
‫that is in Tailwind labs GitHub repo.
‫So just click here.
‫And so then we need to install also this one right here.
‫So let's copy that open again a new terminal
‫and then install this plugin.
‫And so what this will do is to automatically sort the order
‫of the class names in the way that Tailwind recommends it.
‫And this is gonna be pretty helpful for you
‫because then you will always find the same class names
‫in the same position of this long string here.
‫Alright, and now this might already work
‫by default out of the box, but just to make sure
‫let's also create this prettier config file
‫and then copy this code in there.
‫So you see that we are starting
‫to have a lot of these config files, but well
‫that's just how it works in modern React development
‫or actually modern web development in general.
‫So prettier.config.js, let's paste that here.
‫And we could even config all kinds
‫of other stuff about prettier here.
‫So in case you're not familiar
‫with this config file, for example, we could also say
‫that we want single quotes instead of double quotes.
‫So let's say single quote and set it to true.
‫And if we then come back here and give it a save
‫well then we get some problem.
‫So let's click here on this red prettier
‫or you could also have come here
‫to the output and then select prettier from there.
‫So let's see what is wrong.
‫So well, this is a lot of stuff to read.
‫Here it still seems to be correct, but here is the problem.
‫So rename prettier.config.js to end in CGS.
‫Okay, so that was a mistake here, but it's also good to see
‫that this kind of thing happens all the time.
‫And now as I save this, actually you saw
‫that these double quotes that we had here got converted
‫to single quotes.
‫And so with this, we know that it is working.
‫And also down here now it says formatting completed.
‫Okay, so let's head back to our terminal.
‫And now right here as I save this,
‫notice how the order of the classes here should change.
‫And indeed, that's exactly what happened.
‫Great, so now we have Tailwind correctly set up
‫and so we are ready to start using it right
‫in the next video.