2.1 Creating a Project
In this lesson, we'll create a project using the Vue CLI, then install and configure Tailwind.
2.1 Creating a Project
The first thing we need to do is set up our project. And we can create a project and add view to it in a variety of different ways. However, I'm going to use the Vue CLI to create the project because well, why not? It gives you everything that you need and then some sort. In order to use the Vue CLI you need NPM. And to get to NPM, you need to install Node. So hopefully you already have Node installed. I would assume so, but just in case, punch your browser to nodejs.org, download the LTS version. The version number itself really doesn't matter as far as our purposes. But just make sure you get the LTS that stands for Long Term Support and you will be good to go. The installation's very straightforward, just take all of the defaults and that's it. So once you have that installed, then we need to install the Vue CLI. And even if you already have it installed and you haven't updated it in a while, just go ahead and run this command npm install @vue/cli-g. Now if you're not familiar with NPM or Vue or anything like that then I recommend that you actually stop and get caught up at least a little bit because I'm not gonna be explaining any of that. But basically this says to install the Vue cli globally so that we can have access to the vue command just anywhere that we need to use it. And we will use that to create our project. After the installation, we just need to create our project. So vue create, and let's call this tailwind components, let's make it nice and long. And this is of course going to ask us several questions as far as the features that we want to add to our project. Now chances are you do not have the tutsplus or tutsplus no router. I created those a long time ago and they are still there, I haven't gotten rid of them. So don't worry if you don't see those. But go down to manually select Features. I'm going to deselect the Linter/Formatter just because. And I'm going to keep Babel and I'll press Enter. I like to have all of my config files in dedicated files, that's just how I like to roll. And now I don't want to set this as a preset. This is of course going to create and initialize the project, which is not the last step but it's close. After this we will need to add tailwinds to our project, which is very simple to do. We will set that up and then we will test to make sure that everything is working okay. Now that our project is created, let's cd into our new directory. So tailwind-components, and we will install tailwind with npm. That is npm install tailwindcss and this is a dev dependency. This is not something that's going to actually run in the browser. So we want to save this as a dev dependency and then that is going to install that. And this gets us almost everything that we need. Unfortunately, we won't have a config file for tail wind which we will create immediately after this is done, but after that we just have a few things to set through our project, and then we will be ready to go. So here we want to run the command called tailwind. And we have a choice, do we want to run this from the install that we just ran or we can use npx, and I'm going to use npx because it's less typing. So npx and then tailwind init, and that's going to create a config file for us so that we can make any changes that we need to. Gonna fire up the code editor because from here on out we don't really need the command line until we run our application. So we first of all need to go to postcss.config. And we need to modify the plugins here. Instead of an object this is going to be an array and we want to require tailwindcss and we also want to require the autoprefixer. So let's go ahead and bring that in there as well, that's going to make that work. And as far as the config is concerned, that's really it. So now we can run npm run serve that's going to run our application. But we need to tell tailwind where to start pulling in all of its stuff. So let's go to source. Let's go to assets. I'm going to create a new folder here called css, and then a new file called main.css. Now tailwind has a special directive called tailwind. This basically says that, okay tailwind bring in and in this case, all of the base styles. Then we want to bring in all of the components. And then we want to bring in all of the utilities. And that's going to handle all of that, but we also need to tell our application that, hey, we have this CSS file, and we need to process that through our pipeline with webpack and all of that. So let's go to our main.js file and we are simply going to import that CSS, which sounds kinda weird, but that's what we do. So assets, CSS, and then main.css. And by now, everything should be up and running, although it's still compiling which is fine. And we want to point our browser to localhost at Port 8080. And there we go. And the fact that this is way over on the left hand side, that's a good sign because that means that some CSS is being used that is not from the Vue creator. So let's go the app component. And let's just take out pretty much everything. We will leave the div for the root element. Let's get rid of the HelloWorld references. Let's also get rid of the CSS inside of the style tags. I mean, yeah, we will use those later. But inside of this div element, let's add another div, and let's add some utility classes, w-full, which means to make it a full width. Then we have bg grey-500, that sets the color. And then h-12. And don't worry about any of this we will be going over what all of these cryptic things mean. But once you understand, it makes perfect sense. So let's go to the browser. We can see that, hey we have a div at the top with the style and if we wanted to inspect it we could see what the resulting CSS is. Now as far as the classes are concerned, nothing has changed there, but we can see what the CSS is, width full is of course 100% width. Height 12 is 3 rem. But the background isn't really clear as to what the 500 says. But once again we will cover that because the colors are actually scaled so that we have different shades available of the same color. So now that we have our project all up and running, we have tailwind installed, we can get started writing some componentsBack to the top