How to install Tailwind CSS via Visual Studio Code using NPM
Published: 2022-01-14 22:41:56

Tailwind CSS lets you leverage utility classes to build **your own** components. This means you can reference Tailwind CSS classes directly in HTML.

Yup, you heard that right.  

To begin, create a new folder on your desktop and open the folder in [Visual Studio Code](https://code.visualstudio.com/).

---

## Get started

If you have Visual Studio Code, pull up the terminal. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cpn7tvjeqzy5kic4xmm.png)

Type in **npm -v**. This command is necessary to see which version of npm you are running. If you don't have it installed, you'll have an error message. _If you didn't download npm, don't worry. It's pretty easy, [just search for it on Google](https://nodejs.org/en/download)._

Now go ahead and also install node.js. To make sure it's there, run npm -v again in the terminal. If you see your version, it's running and installed properly. If not, you're out of luck. 

Nows our time for real trickery - type in `npm install -d tailwindcss@latest postcss@latest autoprefixer@lates`t in your console.  

You should see a lot of GET requests and 200 messages (which mean everything worked fine) roll in. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31zuxo7fxlwm8kv8epj2.png)
 

---

## Reviewing your folders

After installing Tailwind CSS, you should see your folder has 3 files: **node-modules**, **package-lock.json**, **package.json**. In my case they are in the  tailwind folder that I set up. For the sake of this exercise, I pulled in a Linktree clone I was working on. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejng4ebflppnbwx6k4ht.png)
 
The package.json folder has the dependencies we download, as well as their file version. 

At this point, we will add a configuration file to the package.json file. 

---

## Add a configuration file to the package.json file. 

Typine in "**npx tailwindcss init**" into the terminal.  It's something that has to happen eventually (or so I'm told), so it's better to get it out the way now. You'll then see a tailwind.config.js file pop up in your folder. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kgti5v8qjfay9ob0n1h.png)
 
Now create a style.css file in the tailwind folder (it's fine if you call it something different). In this file, we will add some Tailwind directives. Type in:

@tailwind base;
@tailwind components;
@tailwind utilities;

These directives are pulled from the **node_modules > Tailwind CSS folders.** 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f148cun27irhm9yf0arf.png)

---

## Switch to package.json folder

Now add a comma and then in double quotes add:

`"scripts": {
    "build-css": "tailwindcss build style.css -o css/style.css"
  }`

It's a simple key-value pair. build-css is the key, the value is tailwindcss. Build refers to what we want to build i.e our style.css file that we got. The -o specifies the output file. The final portion **css/style/css** tells the computer where we will store it.

Now in the console type in the script. 

`npm run build-css `

This tells it to run the build-css key-value. 

You should see a new folder built with CSS file inside. I'll end our lesson here, as you've set everything up correctly. Now the fun part begins - building! 

---