How to Install Tailwind CSS: Explained!
Tags: webdev, tailwindcss, beginners, css
Published: 2022-09-01 03:55:18

This post is the beginner's guide on how to install Tailwind CSS using the Tailwind CLI. There are many ways you can install Tailwind CSS and it all depends on what kind of project you are working on.

Before we get started, there are a few points you might need to know:

- If you want to try Tailwind CSS, [Tailwind Play](https://play.tailwindcss.com/) and [Play CDN](https://tailwindcss.com/docs/installation/play-cdn) are the quickest way you can get your hands dirty

- When installing Tailwind CSS on a framework, there might be some differences. Check the [framework guides](https://tailwindcss.com/docs/installation/framework-guides) section to find the installation for your framework. 

- TLDR: https://tailwindcss.com/docs/installation  **`¯\_(ツ)_/¯ `**

## Install Tailwind CSS using Tailwind CLI

The first thing we need is `npm`. NPM is a package manager for JavaScript. Think about a package manager as a way you can manage other people's code inside your project. The reason we need it is to be able to use the `tailwindcss` package in our project.

### Install Node.js and npm

To have npm, we need to install it through installing Node.js. First, we need to check if we have Node.js and npm installed. Open the command prompt (or PowerShell/Terminal/etc.), and enter the following:

```powershell
node -v
```

If the system shows you the version number for node, then you already have node installed. You can do the same to verify npm installation:

```powershell
npm -v
```

![Node.js and npm Version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8784raz09zdpe2mt8dop.jpg)

If you don't get the version number for node and npm, then you need to install Node.js. Go to [nodejs.org](https://nodejs.org/) and depending on your Operating System, install the LTS version.

![Node.js website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0o2l0p9geygfgwdi5mp.jpg)

### Create the Project Directory

Inside the desktop, create a folder called `website`. Inside the `website` folder, create a folder called `src` which we will use to store our website files.

![Project Directory](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eoia6oi8mosixf07t21d.JPG)

### Install `tailwindcss` package

Using the command prompt, go to the project directory (`website` folder). In my case I will enter `cd .\Desktop\website`:

![Changing directory to project root](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k47hax7w5o0n2w3m642j.jpg)

Enter the following to install the `tailwindcss` package:

```powershell
npm install -D tailwindcss
```

The first two words `npm install` will use npm to install a package. The flag `-D` tells npm to only install the package in development and not in production. The last part `tailwindcss` is the package name.

If we open the project folder in VS Code, there is a new folder called `node_modules`. `node_modules` folder is where all the external packages will be saved. If we look into the folder, we can see that there is a `tailwindcss` folder that contains the `tailwindcss` code. The good news is that we do not change anything in this folder and all changes happen with npm commands.

![VS Code view of the new files](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2440nb99yctruu3d5ez1.jpg)

The files `package.json` and `package-lock.json` are also created. `package.json` file contains information about the project with the packages it uses. `package-lock.json` contains the packages with the exact version numbers installed.

### Tailwind CSS Config File

Next, create a Tailwind CSS config file using the following command:

```powershell
npx tailwindcss init
```

`npx` is similar to `npm` but we use it to execute packages. The command we ran, created a new config file called `tailwind.config.js`. The config file contains a boilerplate of the Tailwind CSS configuration. Inside the config file, we have a JavaScript object with a few properties.

![Tailwind CSS config file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywg05kcdy8zg1ym12epu.jpg)

We can configure a lot of things with the config file. For now, the only important part of the config file is the `content` property. The `content` property is the way to tell `tailwindcss` what files to look for when it wants to build our CSS file.

So in our case, we want `tailwindcss` to scan all `.html` files inside the `src` folder. The syntax for that will be the string `"./src/**/*.html"`. Let's break down the path so that you know what is going on here:

- `.`: Start from the current path/folder (the root of the project)
- `/src`: Look inside the `src/` folder
- `/**/`: Look within all subfolders within the parent folder (`src/`)
- `*.html`: The files we want are files with any name (`*`) but with `.html` file extension only.

So here is the final code of our config file:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
}

```

### Tailwind CSS directives

Directives are different parts of Tailwind CSS. We can also register new directives with the use of plugins. Three main directives are:

- **`base`**: Injects Tailwind CSS base styles and registered plugins' styles
- **`components`**: Injects Tailwind CSS component classes and registered plugins' component classes
- **`utilities`**: Injects Tailwind CSS utility classes and registered plugins' utility classes

Inside the `src/` folder, create a file called `style.css`. The name of the file does not matter. Tailwind CSS uses this file as input to build the actual CSS file that contains the CSS styles we need.

Inside the `style.css` file, add the Tailwind CSS directives:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Building The CSS File

Using the command prompt enter the following:

```powershell
npx tailwindcss -i ./src/style.css -o ./src/css/main.css
```

Let's break it down:

- `npx tailwindcss`: Executes the build command
- `-i ./src/style.css`: The flag `-i` tells the `tailwindcss` package what is the `input` file (`./src/style.css`)
- `-o ./src/css/main.css`: The flag `-o` tells the `tailwindcss` package what is the `output` file (`./src/css/main.css`)

Check the project files and we can see that our `main.css` file got built. This is the file that we will import into our HTML file. Right now, the `main.css` only contains the `base` styles. This is because we do not have any HTML page for Tailwind to scan and add the used component or utility classes.

![main.css File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cm15pazwib1a9buxlrr.jpg)

### Use the Tailwind CSS Output File in HTML

Inside the `src/` folder, create a file called `index.html`. Import the `main.css` file and add a simple button with some Tailwind CSS classes to test:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
<body>
  <button class="text-lg text-red-500 bg-red-200">CodeProMax</button>
</body>
</html>
```

Save the file and check the result. If you have the [live server extension](https://codepromax.co/blog/html-common-elements-headings-and-text-html-basics-02/#live-server-extension) installed like me, you can open the file with the live server.

![Result Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icbute4fycu83hmocpzk.jpg)

The button did not get any of the styles we applied to. If we check the `main.css` file, we can see that it does not contain the utility classes we applied to the button. This is because every time we make a change to the classes, Tailwind CSS needs to build the `main.css` file with the latest update.

![main.css file without styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulwbp91vmereeokpkd7a.jpg)

To understand the process better, here is how Tailwind CSS works:

![How Tailwind CSS works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5b72qaajyiyhzdyi356k.png)

To generate the classes we need to run the build command again:

```powershell
npx tailwindcss -i ./src/style.css -o ./src/css/main.css
```

If we check the page now, we can see that our button has got the styles applied to:

![Result Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa8l6h3w4rady9qcb6xr.jpg)

Running the same build command for every change is not a good flow. We can automate that by adding the `--watch` flag to the build command. So here is the build command with the `watch` flag:

```powershell
npx tailwindcss -i ./src/style.css -o ./src/css/main.css --watch
```

You can notice that the command prompt did not finish or stop and it is still active. The `watch` flag keeps the command prompt active and "watches" the files for any change. Once it detects a change, it will run the build command automatically.

![Tailwind CSS Build Command with Watch Flag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcsvef3670d0lg3l501o.jpg)

While the command prompt is still active, let's add a new class `font-extrabold` to the button:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Tailwind CSS</title>
    <link rel="stylesheet" href="css/main.css">
  </head>
<body>
  <button class="text-lg text-red-500 bg-red-200 font-extrabold">CodeProMax</button>
</body>
</html>
```

Save the file, refresh, and we can see the new changes.

![Result Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71mflhoozyp60c1apo8c.jpg)

If you check the `mian.css` file, we can see that the class `font-extrabold` is now added to the file.

![main.css File Updated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymzap0nd7y98g0cevz1p.jpg)

### Tailwind CSS Flow

The things we covered in this post are not your everyday flow using Tailwind CSS. Most of the time you run the build command with the `watch` flag, and continue working on your project.