Complete Guide On How To Install Tailwindcss Via NPM
Tags: webdev, tailwindcss, productivity, css
Published: 2023-01-19 22:18:38

---
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkemt8vgyiy9xglzsciv.png
title: Complete Guide On How To Install Tailwindcss Via NPM
published: true
date: 2023-01-16 16:27:59 UTC
tags: #webdev #Tailwindcss #productivity #css
canonical_url: https://idisepraise.hashnode.dev/complete-guide-on-how-to-install-tailwind-css-via-npm
---

### What is Tailwindcss

Tailwindcss is a CSS framework that helps you rapidly build modern websites by using utility classes in your HTML. It is a framework that helps you build websites using the concepts of CSS. Even though you are still writing CSS when you use Tailwind, you will be able to do it more quickly and effectively. There are too many benefits to list here, but once you start using it, you'll be happy you did.

I'll assume you are well-versed in CSS; otherwise, you might run into issues using Tailwindcss. If you haven't built a few projects using CSS concepts like Flex, Grid, Animations, Responsiveness, and Positioning, I'd suggest skipping learning Tailwindcss for the time being and instead building a couple of those kinds of projects.

There are different methods of installing Tailwindcss for your project. However, in this article, we will focus on installing it via Node Package Manager (NPM) in the Command Line Interface(CLI). At the end of this article, you will be able to set up Tailwindcss for your HTML projects.

### Steps to installing Tailwindcss for your HTML project

I want to walk you through each step of the installation. Please follow the instructions even if you don't understand some of them; once the installation is complete, I will go over them with you.

1. First, you need to check if Node is installed on your computer by entering this command; `Node -v` in your CLI. If this is your first time using the CLI, make sure you enter the commands exactly as you see them, and you should be fine.
On Windows, press Win + X key then select Command Prompt(Admin) from the options. On Mac, press the Command + Space bar to open the Spotlight Search then type Terminal and press Return. 
If you have Node installed, you will get a response like in the image below 
  ![Node version available](https://cdn.hashnode.com/res/hashnode/image/upload/v1673796752682/c1ec90fe-461a-41a9-94b3-a428c2a065d9.jpeg?auto=compress,format&format=webp) 
If you don't get the version of Node, it means you don't have it installed on your computer. To install it, select the respective installer for your computer on the Node.js [website](https://nodejs.org/en/download/)
 ![Node download site](https://cdn.hashnode.com/res/hashnode/image/upload/v1673797376441/d488db8f-b5fe-4cfb-a243-fadc285c7eb7.png?auto=compress,format&format=webp)
 Follow the installer prompt and after installing, confirm you have Node installed by entering Node -v in Command Prompt once more. 
For the remainder of the tutorial, we will use the CLI in VS Code.

2. Open your project folder in VS Code and create an _index.hmtl_ file. Click on Terminal from the toolbar in the upper left corner.
 ![_](https://cdn.hashnode.com/res/hashnode/image/upload/v1673804859580/3397feb8-34b4-49ee-bf40-f1d8bebed727.png?auto=compress,format&format=webp) 
You should get a new window like this
![_](https://cdn.hashnode.com/res/hashnode/image/upload/v1673805086968/fc7c4597-c418-417e-846b-18280590825d.png?auto=compress,format&format=webp) 

3. Next, we will download the Tailwindcss package via NPM and create a _tailwind.config.js_ file.
Enter this command in the Terminal;  `npm install -D tailwindcss` to download the Tailwindcss package.
 ![_](https://cdn.hashnode.com/res/hashnode/image/upload/v1673806484360/17fb6e88-88af-4c87-8a6e-24cec0fb1d78.png?auto=compress,format&format=webp)
After the download is completed, enter this command; `npx tailwindcss init` to create the tailwind.config.js file. 
Your new folder structure should look like this;
 ![_](https://cdn.hashnode.com/res/hashnode/image/upload/v1673807466439/b4c4e517-e99d-42d0-9ecc-a7f227f287d2.png?auto=compress,format&format=webp)


4. In the config file that we created earlier, configure your template files by adding;`"./**/*.{html,js}"` to the square brackets of the content property.
 ![_](https://cdn.hashnode.com/res/hashnode/image/upload/v1674488285111/9ac8abee-3b6d-491e-960d-7b394f6eb9a8.png?auto=compress,format&format=webp)

5. Create an src folder and create an _input.css_ file inside the src folder.
Add the following Tailwind directives to the file; 
`@tailwind base; 
@tailwind components; 
@tailwind utilities;`
 ![_](https://cdn.hashnode.com/res/hashnode/image/upload/v1673809103134/d501a880-02c7-407f-a396-f6eee5250c14.png?auto=compress,format&format=webp)

6. Next, we start the tailwind build process by entering this command in the Terminal;
`npx tailwindcss -i ./src/input.css -o ./public/output.css --watch`
 ![_](https://cdn.hashnode.com/res/hashnode/image/upload/v1674483588446/bc1f9a86-ba90-4726-a628-103c038bb5dd.png?auto=compress,format&format=webp)

7. Add the _output.css_ file to the `<head></head>` in your HTML and start using the utility classes to style your webpage.
![_](https://cdn.hashnode.com/res/hashnode/image/upload/v1674504399115/cca35053-de45-492e-8f79-def1086641c5.png?auto=compress,format&format=webp)


### Folder structure and files in Tailwindcss

Let's analyze the folder structure and files created when we installed Tailwindcss 

- The _node\_modules_ folder is where Tailwind is stored, it contains all the packages Tailwind depends on and you will have no reason to go into the folder to make any changes.

- The _package-lock.json_ file comes with the _node\_modules_ folder and you don't have to go into the file to make any changes.

- The _package.json_ file is used to keep track of our dependencies. You will see Tailwindcss as a dependency inside this file.

- The _input.css_ file in which we added the Tailwind directives is our _source_ file. We can use this as a global stylesheet for adding Tailwind features and syntax and also add our basic CSS classes too.

- In step 6, we ran a command to start the build process. This command is necessary to build our _source_ CSS file into another new CSS file. According to how you named the path, this command will automatically create a new folder and a new CSS file. In this case, the folder name is _public_, and the file name is _output.css_.

- The _output_ file contains all our final CSS rules and we link this file to our HTML page.

- Every time we make a change to the _source_ file or add utility classes to our HTML, the build process command is automatically executed and this happens so that Tailwind can rebuild our _source_ file into the _output_ file

- We rarely have to make changes to the _source_ file directly because using Tailwind will mostly be done by writing inline utility classes in our HTML.

- The _tailwind.config.js_ file is for adding customizations like fonts, colors, screen sizes etc. We added a path to the content property in this file to ensure that Tailwind can successfully locate all the CSS classes in our JS and HTML files.

### Conclusion

Congratulations, you have successfully installed TailwindCSS for your Project. I don't want this article to be too long, so I will add a [link](https://dev.to/kevvve/simple-guide-to-make-you-know-tailwindcss-1j05) to another tutorial explaining best practices and how to use Tailwind in your project. I hope you learned something new from this article, see you next time 🏽