# Add Tailwind CSS to PUG

**Without further ado, let's get started on adding it.**

I have a node.js application with a templating engine - Here currently I am using PUG.  

The first step is to install tailwind CSS,

```bash
npm i tailwindcss
```

The second step is to create a tailwind.config.js file, which can be created using

```bash
npx tailwindcss init
```

The third step is to create two files, Input.css and output.css - You can decide with your own naming convention.

Add the following in the input.css file,

```bash
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Add output.css as your stylesheet in your pug files or the HTML files,

![Add    -->  link(rel="stylesheet", href="output.css")    ---> In head of .pug files](https://cdn.hashnode.com/res/hashnode/image/upload/v1670899270142/1G7LvcMaX.png align="center")

As a final step,

```bash
npx tailwindcss -i path/to/input.css -o path/to/output.css --watch
```

I have it inside the public folder which is in the project root location, so I would write it as,

```bash
npx tailwindcss -i ./public/input.css -o ./public/main.css --watch
```

Now start adding classes to the template, or start adding tailwind classes to the template classes.

You can add this to your input.css file if in case,

![* { @apply bg-black text-white; }    --> in input.css file](https://cdn.hashnode.com/res/hashnode/image/upload/v1670899626325/JqNto6Sm6.png align="center")

This should work, let me know if you find this helpful.

  
Have a great day, and see you at the next one.