# How to add Tailwind to Hugo

> Learn how to add Tailwind CSS to a Hugo theme, from installing it with npm and setting the content paths to wiring up build and watch scripts for your CSS.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2022-07-07 | Topics: [Hugo](https://flaviocopes.com/tags/hugo/) | Canonical: https://flaviocopes.com/hugo-add-tailwind/

Inside your theme folder run

```
npm init -y
```

Then install Tailwind CSS as a development dependency:

```
npm install -D tailwindcss
```

Initialize Tailwind using:

```
npx tailwindcss init
```

This creates the `tailwind.config.js` file. Open it in your editor, and fill the `content` property with your theme layout files in this way:

```js
module.exports = {
  content: ['content/**/*.md', 'layouts/**/*.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Now create `tailwind.css` file in the theme's folder and add this:

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

Now open `package.json` and in the `scripts` section add the `build` and `watch` commands:

```json
{
  "name": "valley",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx tailwindcss -i ./tailwind.css -o ./assets/style.css",
    "watch": "npx tailwindcss -i ./tailwind.css -o ./assets/style.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.1.4"
  }
}
```

Try running

```
npm run build
```

and you should see the `style.css` file!

| Tip: use `npm run watch` when working on the theme, so the changes are saved to the `style.css` file on every file save.

Now we can include it in our layouts, for example I put it in `layouts/partials/header.html`

```
{{ $styles := resources.Get "style.css" }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
```