7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 55 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.1 Creating a Project

In this lesson, we'll set up our environment and test our Tailwind installation.

Related Links

2.1 Creating a Project

Node package manager has definitely changed the way that we work with our dependencies, and CSS is no different. Now, we use NPM to get our CSS frameworks via bootstrap, or in our case, Tailwind CSS. Now, if you go to tailwindcss.com you're going to first of all, see I love the marketing speak basically, here's why you want to use it. You are going to see a command for installing Tailwind using NPM. Now I do want to point out if you go to documentation and installation if you are working with a particular type of project like Vue or React or Laravel, there are integration guides already available. So, if you want to include Tailwind with those projects, then this is where you want to go. We aren't going to cover any of that because it's very specific to those particular types of projects. Instead, we're just going to use the tools provided by Tailwind so that you can get a feel for that. And if you aren't using any one of these types of projects, then this is what you would want to do. Now if you are using post CSS you can use Tailwind CSS as a PostCSS plugin. But once again, we're not going to be doing that we are just going to use just straight up normal CSS. No pre processing and we will use the tools provided by Tailwind. Now before we get started, there are a few things that you need. We are gonna be working with NPM. So that means you need Node installed on your machine. If you don't already have it or if you have a older version than what is listed on the page as far as the LTS is concerned. Then go ahead, download and install the latest LTS version. In our case it really doesn't matter. Tailwind requires Node version 12 which we are well beyond that now. So as far as the version number is concerned, just grab the LTS, download and install it and you will be good to go. Of course, you also need a code editor and I prefer Visual Studio code. Now of course you can use whatever code editor that you want. But when it comes to web development, especially JavaScript or inter development, there's nothing better than Visual Studio Code. And there are some extensions that work very well with Tailwind. So you can get some very nice Intelligence, but we are going to be seeing some intelligence anyway. So after you have NPM and a code editor, then it's time to jump into the command line. And we will get started by creating a folder that we're going to contain all of this stuff in. I'm just gonna call this tw short for Tailwind then, of course we will want to CD into that. And then we're going to run npm init-y that's going to initialize this project with just the default values for the project. Let's go ahead and fire up our code editor, so that we can have that up and running. And there are a few other things. We need an HTTP server, and I like to use something called light server. So we're going to install light server, and we are going to save that as a dev dependency. This is just a simple HTTP server that will auto update or auto refresh the page whenever it detects that there are any changes made to the files that it is serving. It's a nice little utility. And it's an easy way to get an HTTP server without having to install Apache or IIS or anything else. And then for right now, that's it. Let's hop on over into our code editor because we do need to make a few changes here. The first thing is adding a file called bs-config.jason. This is going to be the config file for our light server. You don't have to do this necessarily, but there are some settings that I personally like to set. The first is to open. Whenever you start light server, it will automatically open up the default browser. I typically don't like that. So, open this set to false in my case. There's also a notification that whenever the page is refreshed, there's a little thing that flashes in the upper right hand corner. I don't want to see that either because that obscures the screen for a little bit. And then we can also specify the port which I'm going to use 8080. And then finally are the settings for the server itself because we can say that the server is going to serve files out of a particular directory which is what I typically do and I set that directory to /public there. So this means we need a public folder in our project. So let's go ahead and create that and inside of public, we will create a new file just called index HTML. We'll add in some default HTML, and that'll give us a page to work with. Now, one other thing let's go back to package.jason, and let's change our test script. We're just going to rename that to serve, and then we're going to have a call light server. Now the next thing that we're gonna do is add a CSS file that contains all of Tailwind. Normally we would install the Tailwind CSS NPM package and then use that and eventually we'll get there but, for now, we just want to play around with this CSS. And we can do this very simply by using NPX. We're going to execute something from the Tailwind CLI. We're going to specify that we want to use the latest Tailwind CSS CLI and we want to build Tailwind basically. And we want to specify the output. Now our output is going to be our public folder. So we're just going to output a file called tailwind.css and there we go. Now it is going to prompt us to install Tailwind CSS CLI that's fine and then that's going to build that file and we will be able to use that directly within our project. Now notice that it does say that there is no input file provided. We can provide an input file and that will incorporate that into the build process, and we will look at that later on. But for right now, we are going to be fine. So let's make sure that this actually put it inside of the right folder and it did there's Tailwind CSS. So we can easily add that to our index page. Now in order to test this out, we are going to add a class to our body. And we're just going to add a background color. And you can make this whatever the pattern here is going to be bg dash and then the name of the color. Now of course not every color is going to be used, but use something simple like red or blue, green, yellow or something like that. I'm going to go with Indigo. And then there's the shade. Now the shade is a numeric value that ranges from 100 to 900. And well that's not true. It's 100, 200, 300, 400, 500, and so on. So I'm going to use 700 here. And then we just need to run this. So we'll say npm run serve, that is the script that we set up for running light server. It tells us where we need to go, which is local host 8080, and there we go. We have a page with an indigo background. So in the next lesson, we can start to building our page using Tailwind CSS.

Back to the top